Force IE Élément satisfaistable pour créer des pauses de ligne sur Entrée, sans se casser d'annuler

Question

Sur Internet Explorer, une div contenant crée un nouveau paragraphe (<p></p>) Chaque fois que vous appuyez sur Entrée alors que Firefox crée un <br/> étiquette.

Comme indiqué ici, il est possible d'utiliser javascrip <br/> Au lieu. Mais faire cela brise le menu UNO; Une fois que vous appuyez sur Entrée, vous ne pouvez plus annuler ce point.

Comment puis-je forcer l'élément satisfaistable à créer des pauses à ligne unique sur Entrée sans se casser?

Answer 1

Pas une solution exacte, mais une autre solution de contournement. Si vous utilisez le balisage:

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

Puis appuyer sur Entrer Créera de nouveaux div Tags au lieu de p Mots clés.

Answer 2

Maintenez le décalage vers le bas lorsque vous appuyez sur Entrée pour les pauses, ne le maintenez pas pour les paragraphes complets. Ce comportement est le même par défaut dans Firefox, compte tenu d'une zone satisfait contenant un paragraphe: c'est-à-dire

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

Answer 3

Vraisemblablement, vous allez publier le contenu modifiable sur un serveur. Par conséquent, vous ne devez pas vraiment vous soucier de savoir si vous avez des balises de paragraphe ou de rupture pendant que l'utilisateur est en train de modifier, car vous pouvez analyser le HTML avant la soumission (ou sur le serveur, si vous le souhaitez) et remplacer les instances de paragraphes par des pauses. Cela maintient la file d'attente d'annulation en fonctionnement de l'utilisateur, mais vous permet d'avoir votre HTML aussi propre que vous le souhaitez.

Je suppose en outre que vous saurez exactement quels éléments div seront satisfaisables. Avant que le formulaire ne soit soumis, vous pouvez exécuter chaque div satisfaistable via une fonction comme celle-ci:

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

Et vous appelez cela dans une boucle (qui itère à travers toutes les divs satisfaisables, en utilisant un tableau que j'appellerai les cdivs), comme ceci:

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

et alors:

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

Une amélioration à ce sujet (surtout si vous ne voulez pas le faire correctement au moment de la soumission), pourrait être de nettoyer le contenu de chacun de ces autres fois que vous le souhaitez (onblur, peu importe) et attribuer le contenu de chaque Cediv à son propre élément de formulaire invisible pour une soumission ultérieure. Utilisé en combinaison avec votre propre suggestion CSS ci-dessus, cela pourrait fonctionner pour vous. Cela ne préserve pas vos exigences littérales à la lettre (c'est-à-dire, il ne fait pas que JavaScript fasse le comportement, c'est-à-dire différemment du codé sous les couvertures), mais à toutes fins pratiques, l'effet est le même. Les utilisateurs obtiennent ce qu'ils veulent et vous obtenez ce que vous voulez.

Pendant que vous y êtes, vous voudrez peut-être aussi nettoyer les cordes d'espace dans IE. Si l'utilisateur tape plusieurs espaces (comme certains le font encore après les périodes), ce qui est inséré par IE n'est pas [l'espace] [espace] mais [l'espace], un caractère d'espace initial (String.FromCharcode (32)) plus autant d'entités que Il reste dans la course d'espace.

Answer 4

Utilisation <BR> à la place de <P> (Testé dans IE9. Peut-être nbsp; est nécessaire dans les versions plus anciennes après <BR> (pasteHTML("<br>&nbsp;")) )

Utilisez-le sur l'événement 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

Il peut être impossible de bien faire les choses. Cependant, il est possible de faire le <p> Mots clés voir Comme des pauses à ligne unique, en supprimant la marge intégrée autour des étiquettes de paragraphe, en utilisant CSS:

p { margin: 0; }

Il y a un inconvénient à cette approche: si l'utilisateur doit copier / coller du texte dans l'élément contenu et contenu, le texte peut sembler être interrompu à l'intérieur de l'élément mais à double espacé à l'extérieur de l'élément.

Pire, dans au moins certains cas, c'est-à-dire détecter automatiquement les pauses à double ligne pendant la pâte, en les remplaçant par <p> Mots clés; Cela gâchera le formatage du texte collé.

Answer 6

IE lie le nœud de texte avec un <p> marquer Entrer appuyez sur la touche. Pour obtenir une pause de ligne Décalage+Entrer. Firefox ajoute un <br> marquer Entrer appuyez sur la touche. Pour rendre le comportement commun dans les deux navigateurs, vous pouvez effectuer ce qui suit:

Supposons le balisage suivant:

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

JavaScript [Supposons que le code ci-dessous se trouve dans une fermeture de fonction afin que vous ne bloquiez pas la page avec les 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);
         }
     })
 })();

Noter: Ce script est avant jQuery <1,9 pour l'utilisation du déprécié $.browser

Answer 7

Envisager d'utiliser <span contenteditable="true"></span> Lorsque vous utilisez Internet Explorer. Vous ne voudrez peut-être pas faire cela avec Chrome car l'attention semble drôle. Vous voudrez probablement implémenter le vôtre onfocus et onblur code.