Forzar el elemento contento de IE a crear saltos de línea en la tecla ENTER, sin romper

Question

En Internet Explorer, un div contenido de contenido crea un nuevo párrafo (<p></p>) cada vez que presionas enter, mientras que Firefox crea un <br/> etiqueta.

Como se discutio aquí, es posible usar JavaScript para interceptar el rango Intro keyPress y usar rango.pastehtml para crear un <br/> en cambio. Pero hacer esto rompe el menú Deshacer; Una vez que presionas Enter, ya no puedes deshacer ese punto.

¿Cómo puedo obligar al elemento contento a crear saltos de línea única en ENTER sin romper la deshacer?

Answer 1

No es una solución exacta, sino otra solución. Si usa el marcado:

<div contenteditable="true">
<div>
content
</div>
<div>

Luego presionando ingresar creará nuevo div etiquetas en lugar de p Etiquetas.

Answer 2

Mantenga presionado el desplazamiento cuando presione Entrar para descansar, no lo mantenga presionado para los párrafos completos. Este comportamiento es el mismo de forma predeterminada en Firefox, dada un área contenta que contiene un párrafo: es decir

<div contenteditable="true">
    <p>If you are typing here</p>
<div>

Answer 3

Presumiblemente, publicará el contenido editable a un servidor. Por lo tanto, realmente no debería importarle si tiene etiquetas de párrafo o ruptura en su lugar mientras el usuario está editando, porque puede analizar el HTML antes de enviar (o en el servidor, si lo desea) y reemplazar instancias de párrafos con descansos. Esto mantiene la cola de deshacer en funcionamiento para el usuario, pero le permite tener su HTML tan limpio como lo desee.

Presumiré además que sabrá exactamente qué elementos Div se contagiarán. Antes de enviar el formulario, puede ejecutar cada div contenido de contenido a través de una función como esta:

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

Y lo llamas en un bucle (que itera a través de todos los divs contentos, usando una matriz que llamaré Cedivs), así:

ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again

y entonces:

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

Una mejora en esto (especialmente si no desea hacer esto bien en el momento de enviar), podría ser limpiar el contenido de cada uno de esos tiempos que desee (Onblur, lo que sea) y asignar el contenido de cada Cediv a su Elemento de formulario invisible propio para la presentación posterior. Utilizado en combinación con su propia sugerencia CSS anterior, esto podría funcionar para usted. No preserva sus requisitos literal a la carta (es decir, no hace que JavaScript haga que se comporte de manera diferente a lo que se ha codificado bajo las portadas para comportarse), pero a todos los efectos prácticos, el efecto es el mismo. Los usuarios obtienen lo que quieren y usted obtienes lo que quieres.

Mientras lo haga, también puede limpiar las cuerdas espaciales en IE. Si el usuario escribe múltiples espacios (como algunos todavía hacen después de los períodos), lo que inserta, es decir, no es [espacio] [espacio] sino [espacio], un carácter de espacio inicial (String.FromCharcode (32)) más tantas entidades como quedan en la carrera espacial.

Answer 4

Usar <BR> en vez de <P> (Probado en IE9. Tal vez nbsp; se necesita en versiones anteriores después de <BR> (pasteHTML("<br>&nbsp;")) )

Úselo en el evento Keydown:

if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}

Answer 5

Puede ser imposible hacer esto bien. Sin embargo, es posible hacer el <p> etiquetas Mira como descansos de una sola línea, eliminando el margen incorporado alrededor de las etiquetas de párrafo, usando CSS:

p { margin: 0; }

Hay un inconveniente en este enfoque: si el usuario necesita copiar/pegar texto en el elemento contento, el texto puede parecer estar en un solo espacio dentro del elemento pero a doble espacio fuera del elemento.

Peor aún, en al menos en algunos casos, IE detectará automáticamente los descansos de doble línea durante la pasta, reemplazándolos con <p> Etiquetas; Esto arruinará el formato del texto pegado.

Answer 6

Es decir, une el nodo de texto con un <p> etiquetar en Ingresar Presione la tecla. Para lograr una línea de línea Cambio+Ingresar. Firefox agrega un <br> etiquetar en Ingresar Presione la tecla. Para que el comportamiento sea común en ambos navegadores, puede hacer lo siguiente:

Suponga el siguiente marcado:

<div id="editableDiv" contentEditable="true"></div>

JavaScript [Suponga que el siguiente código está en un cierre de funciones para que no hinche la página con globals]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Nota: Este script es anterior a jQuery <1.9 para el uso de lo desapercibido $.browser

Answer 7

Considere usar <span contenteditable="true"></span> Cuando se usa Internet Explorer. Es posible que no desee hacer esto con Chrome porque el enfoque se ve divertido. Probablemente querrás implementar el suyo propio onfocus y onblur código.