Wie man die tab-Taste, Fügen Sie ein tab-Zeichen in eine contentEditable div?

Baue ich einen einfachen text-editor, indem Sie die Einstellung contentEditable=true auf ein div (jedenfalls denke ich, dass textarea-Komponente verhält sich in der gleichen Weise) und ich habe einige Probleme mit der tab-Taste.

Was ich will, ist, dass, wenn der Benutzer die tab-Taste drückt, wird der Fokus bleibt auf das div-Element und einem tab-Zeichen wird in den text eingefügt.

Hab ich gelöst der erste Teil des Problems durch den Aufruf preventDefault() auf das event-Objekt auf keydown und jetzt das div nicht verlieren den Fokus, aber ich weiß nicht, warum kann ich nicht das Zeichen einzufügen.

Die Einheit code für die tab-char ist 	 aber wenn ich versuche, fügen Sie diese Zeichenfolge an die innerHTML-Firefox ersetzen Sie es mit einem einfachen Leerzeichen (nicht   nur ein Leerzeichen). Ich habe auch versucht mit \t aber das Ergebnis ist das gleiche.

Also meine Frage ist, wie kann ich das einfügen eines Tabulator-Zeichens in den text?

InformationsquelleAutor der Frage mck89 | 2010-02-10

  1. 8

    Der Grund, warum sehen Sie nur einen einfachen Raum, weil Sequenzen von whitespace-Zeichen (mit Ausnahme von non-breaking spaces) behandelt werden wie ein einzelnes Leerzeichen im inneren divs. Wenn Sie möchten das tab-Zeichen für die Anzeige in der Weise, die Sie erwarten, werden Sie brauchen, um es inside etwas wie ein <pre> element, durch das Leerzeichen wie in der HTML-Quelle.

    InformationsquelleAutor der Antwort Tim Down

  2. 18

    Ich weiß das ist ein bisschen alt, aber dieser landete das beste für mich...

    function onKeyDown(e) {
    if (e.keyCode === 9) { //tab key
        e.preventDefault();  //this will prevent us from tabbing out of the editor

        //now insert four non-breaking spaces for the tab key
        var editor = document.getElementById("editor");
        var doc = editor.ownerDocument.defaultView;
        var sel = doc.getSelection();
        var range = sel.getRangeAt(0);

        var tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
        range.insertNode(tabNode);

        range.setStartAfter(tabNode);
        range.setEndAfter(tabNode); 
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

    InformationsquelleAutor der Antwort Michael Sabin

  3. 12

    Da die Antwort, dass angeblich richtige nicht für mich arbeiten, ich kam mit dieser Lösung, die ich denken würde, Arbeit für mehr Menschen.

    $(document).on('keyup', '.editor', function(e){
  //detect 'tab' key
  if(e.keyCode == 9){
    //add tab
    document.execCommand('insertHTML', false, '&#009');
    //prevent focusing on next element
    e.preventDefault()   
  }
});

    Dass code, der für mich gearbeitet, aber auch stellen Sie sicher, dass die white-space:pre-wrap Attribut in der css. Hoffe, dies geholfen!

    InformationsquelleAutor der Antwort Devplex

  4. 10

    Leerzeichen und Tabulatoren sind zusammengebrochen in html zu einem Raum, es sei denn, in einem <pre> tag oder hat white-space: pre in seinem Stil

    InformationsquelleAutor der Antwort meouw

  5. 4

    Verwende ich diese Lösung:

    $('[contenteditable]').on('keydown', function(e){
    if(e.keyCode == 9){
        e.preventDefault();
        document.execCommand('insertHTML', false, '&#009');
    }
}).css('white-space', 'pre-wrap');

    Beim arbeiten mit editierbaren code, eine <pre> element muss nicht die zuletzt hinzugefügten css-Dateien. keyup vs keydown und die position e.preventDefault() unterscheiden sich in Browsern.

    Hinweis: ich denke, die Bindung der key-event oder was auch immer aus dem ganzen Dokument ist zu vermeiden. Ich hatte seltsame Probleme mit Safari /iOS desktop-Browser mit contenteditable-Elemente-und bubbling-Ereignisse.

    InformationsquelleAutor der Antwort Jonas Lundman

Schreibe einen Kommentar