Wie die Tab-Taste Einfügen eines Tab-Zeichen in einem contentEditable div machen?

Question

Ich baue einen einfachen Texteditor von contentEditable=true auf einem div-Einstellung (sowieso denke ich, dass TextArea- verhält sich in der gleichen Art und Weise), und ich habe einige Probleme mit der Tab-Taste.

Was ich will, ist, dass, wenn der Benutzer die Tabulatortaste drückt, der Fokus bleibt auf der div und ein Tab-Zeichen wird in den Text eingefügt.

habe ich den ersten Teil des Problems gelöst durch preventDefault() auf dem Ereignisobjekt auf keydown Aufruf und jetzt das div nicht verliert den Fokus, aber ich weiß nicht, warum ich nicht den Charakter einfügen.

Der Code Einheit für die Registerkarte char ist 	 aber wenn ich versuche, diese Zeichenfolge an das innerHTML- Firefox hinzufügen ersetzen Sie es mit einem einfachen Raum (nicht   nur ein weißer Raum). Ich habe auch versucht, mit \t aber das Ergebnis ist das gleiche.

Also meine Frage ist, wie kann ich ein Tab-Zeichen in dem Text einfügen?

Answer 1

Der Grund, warum Sie nur einen einfachen Raum sehen ist, weil Sequenzen von Leerzeichen (außer non-breaking Leerzeichen) als ein einzelnes Leerzeichen innerhalb divs behandelt werden. Wenn Sie die Tab-Zeichen auf dem Display in der Art und Weise wollen Sie erwarten Sie es wie ein <pre> Element in etwas setzen müssen, die Leerzeichen macht, wie es in den HTML-Quellcode ist, oder in einem Element mit white-space: pre Satz über CSS.

Answer 2

Ich weiß, das ist ein bisschen alt, aber das ist für mich die beste Arbeit endete ...

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);
    }
}

Answer 3

Da die Antwort, die angeblich richtig funktioniert nicht für mich war, kam ich mit dieser Lösung bis ich denke, dass mehr Menschen arbeiten.

$(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()   
  }
});

Dieser Code funktioniert für mich, aber auch sicherstellen, dass das white-space:pre-wrap Attribut in Ihrem CSS aufzunehmen. Hoffe, dass dies geholfen!

Answer 4

Tabulator und Leerzeichen in HTML zu einem Raum zusammengebrochen, es sei denn in einem <pre> Tag oder haben white-space: pre in seinem Stil

Answer 5

Sie können eine Spannweite mit weiß-Raum einfügen = Vor- und Inhalt Registerkarte. Das ist besser, mit Bereichen wie dies getan:

// adapted from http://stackoverflow.com/a/25943182/460084
function insertTab() {
  if (!window.getSelection) return;
  const sel = window.getSelection();
  if (!sel.rangeCount) return;
  const range = sel.getRangeAt(0);
  range.collapse(true);
  const span = document.createElement('span');
  span.appendChild(document.createTextNode('\t'));
  span.style.whiteSpace = 'pre';
  range.insertNode(span);
  // Move the caret immediately after the inserted span
  range.setStartAfter(span);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

$(document).on('keydown', '.editor', function(e) {
  if (e.keyCode == 9) {
    insertTab();
    e.preventDefault()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable=true style="border: solid" class='editor'></div>

Answer 6

Ich benutze diese Lösung:

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

Wenn mit editierbaren Code arbeitet, ein <pre> Element braucht nicht den zuletzt hinzugefügten CSS. keyup vs keydown und die Position von e.preventDefault () in Browsern unterscheiden können.

Hinweis: Ich denke, die Bindung des Schlüsselereignis oder was auch immer aus dem gesamten Dokument ist zu vermeiden. Ich hatte seltsame Probleme mit Safari / iOS Desktop-Browser mit contenteditable Elementen und sprudelnden Ereignissen.