Obtenga contenido Altura de div editable después de escribir un nuevo carácter

Actualmente tengo un contenido Div editable con un ancho fijo y una altura flexible, que debe boostse o networkingucirse de acuerdo con la longitud de la input del usuario.

El problema es que pensé en el siguiente código, estoy obteniendo la altura del contenidoEditable basado en el último carácter escrito, este es mi código:

<!-- THE JS FUNCTION THE GETS THE DIV CALLED title HEIGHT--> function setInTitle() { var titleHeight = document.getElementById('title').offsetHeight; } <!-- THE DIV CALLED title --> <div id="title" class="title" contenteditable="true" style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;" autocapitalization="off" autocorrection="off" autocomplete="off" onKeyPress="setInTitle();" <==CALL THE JS FUNCTION ></div> 

Por lo tanto, necesito a través de JAVASCRIPT, get la altura de contenido editable inmediatamente después de escribir un nuevo carácter y, si es posible, antes de que el carácter se convierta, como el siguiente esquema:

TECLADO TECLADO PRESIONADO =>

JS CONSIGUE LA ALTURA DEL CONTENEDITABLEDIV CON EL NUEVO CHAR =>

CHAR AHORA SERÁ RENDIDO (Esto es solo una simulación, por supuesto, las cosas no serán estrictamente así)

¿Esto se puede hacer? Cualquier idea sería apreciada, gracias de antemano!

Teniendo en count que la altura del div no boostá antes de que aparezca el char, puedo sugerirle mi solución. Puede rellenar con las letras mecanografiadas otro div interceptando el evento, luego get la altura de este segundo div y, finalmente, puede colocar la letra donde debería aparecer. Esto aumenta el time de input.

Puedes probar el script aqui.

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style type="text/css"> #title { border: 1px #3399FF solid; min-height:50px; width:100px; word-wrap:break-word; } #title2 { filter:alpha(opacity=20); opacity:0.2; border: 1px #3399FF solid; min-height:50px; width:100px; word-wrap:break-word; } </style> </head> <body> <!-- THE DIV CALLED title --> <div id="title" class="title" contenteditable="true" style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;" autocapitalization="off" autocorrection="off" autocomplete="off" ></div> <div id="title2" class="title" contenteditable="true" style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;" autocapitalization="off" autocorrection="off" autocomplete="off" ></div> <div id="a"></div> </body> <script> var slowl = 400 //updating time var lastts = "";//last timestamp value $("#title").on('keydown keyup change keypress', function(e) {//catch the event e.preventDefault();//stop the event if(e.timeStamp-lastts < slowl){//try prevent keypress abuse return false; } lastts = e.timeStamp; var html=$('#title').text(); console.log(e); if(e.charCode!=0){//all browsers char = e.charCode; }else{ char = e.keyCode; } content = $('#title').text()+String.fromCharCode(char); //prepare content $('#title2').text(content); var height = $('#title').height(); $('#a').html(height); setTimeout("$('#title').text($('#title2').text());",slowl);//normalize the sitation }); </script> </html> 

Si adjunta el manejador de events al keyup lugar de keydown , puede search la altura después de renderizar. No puede get la altura de renderización antes de que se renderice. ¿Por qué estás pidiendo eso?

js

 var output = document.getElementById('output'); var title = document.getElementById('title'); title.addEventListener("keyup", function (e) { output.innerHTML = title.offsetHeight; }); //initialize output.innerHTML = title.offsetHeight; 

html

 <div>Height of #title is: <span id="output">...</span>px</div> <div id="title" class="title" contenteditable="true" autocapitalization="off" autocorrection="off" autocomplete="off" >type here</div> 

¿Es esto lo que buscabas? Demo en http://jsfiddle.net/jksCt/

¿Qué sucede si mantiene una visibilidad: DIV oculta que duplica el text visible con el mismo ancho fijo. Luego, puede adjuntar un evento al evento onKeyDown del DIV visible, insert ese carácter en el DIV oculto, get la nueva altura del DIV oculto y, a continuación, actualizar la nueva altura en el DIV visible antes de registrar el evento onKeyUp.

Puedes recuperar la altura casi instantáneamente usando setTimeout con 0 delay:

 <div id="title" class="title" contenteditable="true" autocapitalization="off" autocorrection="off" autocomplete="off" onkeypress="setTimeout(function() { var height = document.getElementById('title').offsetHeight; console.log(height); }, 0)" >type here</div> 

Esto todavía se hace después de la prestación, creo, sin embargo, pero casi al instante. La única forma de hacerlo antes de renderizar es con un elemento oculto que duplica todos los styles y el contenido del elemento que necesita medir.

Editar:

Me corregiré No necesitas un elemento extra para medir la altura. Puede insert el carácter presionado en el mismo elemento, medirlo y luego eliminar el carácter. La parte complicada es que debería tener en count la position del cursor y la selección actual, tanto para insert el carácter como para restaurar la selección después de medir el elemento. También tenga en count que presionar una tecla no está necesariamente anexando un carácter. Si hay una selección, la sobreescribirá, eliminará el contenido. También necesitará manejar events del portapapeles, etc.

La solución que sugerí aquí no manejaría el caso en el que se edita contenido con el mouse (como, por ejemplo, cortar / copyr / pegar desde el menu contextual). Sugiero que busques en el evento de input HTML5, que podría ser un mejor candidato para esto.

Podrías usar un editor que tenga esto resuelto para ti.

Goog.Editor.SeamlessField tiene este cross-browser resuelto:

http://closure-library.googlecode.com/git/closure/goog/demos/editor/seamlessfield.html

Aquí hay instrucciones para get una compilation de la misma:

http://b9dev.blogspot.com/2013/06/getting-started-with-google-closure-on.html

O para los perezosos, puedes usar la construcción con la que terminé:

http://brass9.com/downloads/editor.min.js

Lo usaría como:

 // Work with a tag with id=editor var editor = new Editor('editor'); // Make contentEditable editor.makeEditable(); // Get the HTML contents of the tag editor.getCleanContents();