Comment faire la clé de tabulation Insérer un caractère de tabulation dans un div contentEditable?

Je suis en train de construire un simple éditeur de texte par la mise en contentEditable=true sur un div (de toute façon je pense que textarea se comporte de la même façon) et j'ai quelques problèmes avec la touche de tabulation.

Ce que je veux, c'est que lorsque l'utilisateur appuie sur la touche tab, l'accent reste sur la div et un caractère de tabulation est ajoutée au texte.

J'ai résolu la première partie du problème en appelant preventDefault() sur l'objet de l'événement sur keydown et maintenant, la div ne pas perdre le focus, mais je ne sais pas pourquoi je ne peux pas insérer le caractère.

L'entité code de l'onglet char est 	 mais si j'essaie d'ajouter cette corde à l'innerHTML Firefox de le remplacer par un espace simple (pas   un espace blanc). J'ai aussi essayé avec \t mais le résultat est le même.

Donc ma question est, comment puis-je insérer un caractère de tabulation dans le texte?

source d'informationauteur mck89

  1. 8

    La raison pour laquelle vous ne voyez qu'un simple espace est parce que les séquences de caractères espace (à l'exception des espaces insécables) sont traités comme un seul caractère espace à l'intérieur de divs. Si vous souhaitez que le caractère de tabulation pour afficher dans la façon dont vous vous attendez à ce que vous aurez besoin de le mettre à l'intérieur de quelque chose comme un <pre> élément qui rend les espaces que c'est dans la source HTML.

  2. 18

    Je sais c'est un peu vieux, mais il a fini par travailler le mieux pour moi...

    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);
    }
}
  3. 12

    Puisque la réponse qui a été soi-disant corriger ne fonctionne pas pour moi, je suis venu avec cette solution, je pense, le travail pour plus de personnes.

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

    Que le code a fonctionné pour moi, mais aussi assurez-vous d'inclure les white-space:pre-wrap attribut dans votre css. Espérons que cela a aidé!

  4. 10

    les onglets et les espaces sont réduits en html à un espace, à moins que dans un <pre> tag ou a white-space: pre dans son style

  5. 4

    J'utilise cette solution:

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

    Lorsque vous travaillez avec code modifiable, un <pre> élément n'a pas besoin de la dernière ajouté css. keyup vs keydown et la position de l'e.preventDefault() peut varier selon les navigateurs.

    Remarque: je pense que la liaison de l'événement-clé ou que ce soit à partir de l'ensemble du document est à éviter. J'ai eu des problèmes étranges avec Safari /iOS les navigateurs de bureau avec contenteditable des éléments et des événements de propagation.