HTML文本区域选项卡支持

Question

我正在制作一个基于Web的代码编辑器，并使用文本区域进行文本编辑。我想为文本区域添加标签支持，以便按下标签不会使元素失去焦点。 我已经定义了文本区域如下： <textarea id="codeEdit_txt" rows="50" cols="80" onkeydown="return codeEdit_keyDown(event);"> 并且函数codeEdit_keyDown定义如下：

function codeEdit_keyDown(e) {
    if (e.keyCode == 9) {
        return false;
    }
}

这可以防止按下Tab键使文本区失去焦点，但不会留下Tab字符。在我最初尝试使其工作时，我注意到如果将函数定义如下，它会在光标位置放置一个Tab字符。

function codeEdit_keyDown(e) {
    if (e.keyCode == 9) {
        alert("");
        return false;
    }
}

我的两个问题是：

1. 为什么添加一个警告框会导致添加一个选项卡？
2. 是否有一种方法可以在光标位置添加选项卡，而不必查找光标位置、拆分文本区域中的文本并手动添加制表符（而且不必每次用户按下Tab键时都弹出警告框）？

谢谢

编辑：这只在Chrome中有效，而IE、Safari或Firefox中无效。

- Andy Metcalfe

---

我刚刚尝试了那个链接，它似乎在Chrome中可以工作，但在IE、Firefox或Safari中不行。这可能是Chrome的一个bug吗？ - Andy Metcalfe

Answer 1

请参考此问题：https://dev59.com/ZnVD5IYBdhLWcg3wXaYd#13130。

您需要使用`.preventDefault();`。 编辑: 一个演示。 编辑2: 由rainecc提供的更好的演示。

- Josh

---

我在寻找答案的时候发现了这个问题，preventDefault 可以防止失去焦点，但它并没有添加制表符。有没有办法同时添加制表符呢？ - Andy Metcalfe

我修改了Josh的代码片段以添加制表符 - 对我来说完美地运作。太棒了，Josh。http://jsfiddle.net/rainecc/n6aRj/1/ - rainecc

抱歉，我明白了，代码是手动添加了4个空格作为制表符。我希望能够在光标所在位置添加制表符，所以我想要将其添加到文本框/文本区域中现有文本的中间。我只需要找到光标位置，将其分割开，并在两个分割点之间插入制表符，对吗？ - Andy Metcalfe

后面的小把戏是添加一个字面制表符'\t'。文本框可能会将其呈现为更少的制表位，因为它会跳到下一个制表位，但它确实存在。 - Josh

这个解决方案可以让你得到真正的制表符：this.value += "\t"; - Andrius Naruševičius

Answer 2

另一个答案很好，但它在结尾处添加了制表符。 我查找了如何在光标位置添加制表符，并将其添加到解决方案中。

您可以在此处找到可工作的代码：http://jsfiddle.net/felixc/o2ptfd5z/9/ 代码内联作为保障：

  function insertAtCursor(myField, myValue) {
   //IE support
   if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
   }
   //MOZILLA and others
   else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
     + myValue
     + myField.value.substring(endPos, myField.value.length);
    myField.selectionStart = startPos + myValue.length;
    myField.selectionEnd = startPos + myValue.length;
   } else {
    myField.value += myValue;
   }
  } 

  function addTabSupport(elementID, tabString) {
   // Get textarea element
   var myInput = document.getElementById(elementID);

   // At keydown: Add tab character at cursor location
   function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
     insertAtCursor(myInput, tabString);
     if(e.preventDefault) {
      e.preventDefault();
     }
     return false;
    }
   }   

   // Add keydown listener
   if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',keyHandler,false);
   } else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
   }
  }
    
    // easily add tab support to any textarea you like
    addTabSupport("input", "\t");

<h1>Click in the text and hit tab</h1>

<textarea id="input" rows=10 cols=50>function custom(data){
 return data;
}</textarea>

- felixc

Answer 3

这是我用于自己的编辑器（使用其他答案）的代码：

function insertAtCursor (el, text) {
  text = text || '';
  if (document.selection) {
    // IE
    el.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (el.selectionStart || el.selectionStart === 0) {
    // Others
    var startPos = el.selectionStart;
    var endPos = el.selectionEnd;
    el.value = el.value.substring(0, startPos) +
      text +
      el.value.substring(endPos, el.value.length);
    el.selectionStart = startPos + text.length;
    el.selectionEnd = startPos + text.length;
  } else {
    el.value += text;
  }
};

document.querySelector("#editor").addEventListener("keydown", function(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        insertAtCursor(this, "\t");
    if(e.preventDefault) {
        e.preventDefault();
    }
    return false;
    }
}, false);

- Wise Man