Machen Sie eine <br> statt <div></div> durch drücken der EINGABETASTE auf einem contenteditable

Ich geschrieben habe, ein bisschen code in meine Tastatur event-handler einfügen <br> in Reaktion auf das drücken der Enter-Taste:

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

Funktioniert dies nur, wenn der cursor zwischen zwei Buchstaben, wenn Ihr am Ende brauche ich zwei <br>-Elemente. Kann ich erkennen, wenn ich am Ende einer Zeile? Oder einige andere arbeiten die Idee für das Enter-problem?

Ich habe auch versucht zu fangen, der normale key-Events (wothout die Strg-Taste gedrückt) und erstellen Sie ein Tastatur-Ereignis mit JS, wo Sie die Enter-Taste gedrückt wird, zusammen mit der Strg. Aber diese schien das nicht funktionieren...

Muss es nur noch Funktionieren in Webkit/Safari...

InformationsquelleAutor der Frage Phil | 2010-06-20

  1. 24

    Um Ihr problem zu lösen, halten Sie immer eine br element als letztes element contenteditable div. Dadurch wird sichergestellt, vorhersagbares Verhalten bei der Injektion ein br-element vs. der Standard-browser, die Injektion von div-Elementen. Sie können die lastChild auf keyup und mouseup, um sicherzustellen, dass es ein br-element. Vorausgesetzt, Sie haben ein Dokument, wie:

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

    Können Sie den folgenden JavaScript (w/jQuery 1.4+), um ein br-element als letztes element und injizieren ein br-element anstelle von 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;
        }
      }
    });

});

    Getestet auf Apple OS-X w/Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Versuchen Sie es mit ierange zu bekommen dies funktioniert in Windows Internet Explorer.

    InformationsquelleAutor der Antwort Jake McGraw

  2. 0

    Ich würde binden eine Funktion, um das keyup-Ereignis zu löschen, und ändern
    Verwendung von regEx. Also selbst wenn es erzeugt seltsame markup, das es behoben wird.

    Verwendung von jQuery:

    $('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});

    InformationsquelleAutor der Antwort Bakaburg

Schreibe einen Kommentar