如何使制表符tab能在带有contenteditable标签的元素内使用？

Question

RT.

比如在segmentfault里面写文章或者提问的时候，在文本编辑框里面使用制表符是可以缩进4个空格的，
这个效果是怎么实现的呢？

我每次按tab键后，光标就不在这个文本框里面了。

Answer 1

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

https://stackoverflow.com/que...

Answer 2

监听键盘事件，判断键值为制表符时插入4个空格，取消默认动作。

$('#editor').keydown(function(e){
     if(e.keyCode === 9) {
           // 插入4个空格
     }
     return false; // 取消默认动作，也可以用 e.preventDefault();
})