Faire un <br> au lieu de <div></div> en appuyant sur Enter sur un contenteditable

J'ai écrit un bout de code dans mon gestionnaire d'événements clavier pour insérer un <br> en réponse à la pression de la touche Entrée:

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

Cela ne fonctionne que si le curseur se trouve entre deux Lettres, si elle est sur la fin, j'ai besoin de deux <br>-Éléments. Puis-je détecter si je suis sur la fin d'une Ligne? Ou une autre idée pour l'Entrée de problème?

J'ai aussi essayé d'attraper la normale événement-clé (wothout la Touche ctrl appuyée) et de créer un clavier-événement avec JS lorsque la Touche Entrée est pressée avec la touche ctrl. Mais ce dosn pas de travail...

Il a seulement à Travailler dans Webkit/Safari...

OriginalL'auteur Phil | 2010-06-20

  1. 24

    Afin de résoudre votre problème, gardez toujours un br élément comme le dernier élément de votre contenteditable div. Cela permettra d'assurer un comportement prévisible lors de l'injection d'un br élément vs le navigateur par défaut de l'injection des éléments div. Vous pouvez vérifier la lastChild sur keyup et mouseup, afin de s'assurer qu'br élément. En supposant que vous avez un document comme:

    <div id="editable" contenteditable="true"></div>

    Vous pouvez utiliser le code JavaScript suivant (w/jQuery 1.4+) pour garder une br élément comme le dernier élément et injecter un br élément au lieu de div div:

    $(function(){

  $("#editable")

    //make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    //use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

});

    Testé sur Apple OS X w/Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Essayez d'utiliser ierange pour obtenir que cela fonctionne dans Windows Internet Explorer.

    Pas besoin de range.collapse(false);: vous avez déjà positionné le début et la fin de la plage. Une alternative à IERange est mon propre Longiligne (code.google.com/p/rangy), qui est un concept similaire mais plus entièrement réalisé (et activement maintenu).

    OriginalL'auteur Jake McGraw

  2. 0

    Je voudrais lier une fonction à l'événement keyup pour supprimer et modifier
    en utilisant les regEx. Ainsi, même si elle crée étrange de balisage, il sera fixé.

    À l'aide de jQuery:

    $('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});
    1) .html() doit être utilisé à la place de .texte() 2) il fonctionne, mais le curseur reste avant <br/>, pas après (après avoir appuyé sur Entrée).

    OriginalL'auteur Bakaburg