Javascript 如何处理<；选项卡>；在文本区？

我想一个文本区，处理按下tab键的情况

在默认情况下，如果按tab键，则焦点将离开文本区域。但当用户想要在文本区域中键入tab键时，情况又如何呢

我是否可以捕获此事件并将焦点返回到文本区域并将选项卡添加到当前光标位置？

您可以：

---

---

以下是pimvdb答案的修改版本，不需要JQuery：

document.querySelector("textarea").addEventListener('keydown',function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var target = e.target;
        var value = target.value;

        // set textarea value to: text before caret + tab + text after caret
        target.value = value.substring(0, start)
                    + "\t"
                    + value.substring(end);

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
},false);

---

我在Firefox21.0和Chrome27中测试了它。不知道它在其他地方是否有效。

天哪，之前的所有答案都未能提供通常体面的（即程序员）选项卡控件

也就是说，在选择行时单击制表符将缩进这些行，而SHIFTTAB将取消这些行的缩进

_编辑（2016年11月）：根据，用charCode | | keyCode替换keyCode

（函数（$）{
$.fn.enableSmartTab=函数（）{
var$这个；
$this=$（this）；
$this.keydown（函数（e）{
var after、before、end、lastNewLine、changeLength、re、replace、selection、start、val；
if（（e.charCode==9 | | e.keyCode==9）和&！e.altKey和&！e.ctrlKey和&！e.metaKey）{
e、 预防默认值（）；
开始=此。选择开始；
end=this.selectionEnd；
val=$this.val（）；
before=val.substring（0，开始）；
after=val.substring（结束）；
替换=真；
如果（开始！==结束）{
选择=val.substring（开始、结束）；
if（~selection.indexOf（'\n'））{
替换=假；
changeLength=0；
lastNewLine=before.lastIndexOf（'\n'）；
如果（！~lastNewLine）{
选择=之前+选择；
changeLength=在.length之前；
前=''；
}否则{
选择=前.substring（lastNewLine）+选择；
changeLength=before.length-lastNewLine；
before=before.substring（0，lastNewLine）；
}
如果（如换档键）{
re=/（\n | ^）（\t |[{1,8}）/g；
if（选择匹配（re））{
开始--；
可变长度--；
}
选择=选择。替换（重“$1”）；
}否则{
选择=选择。替换（/（\n | ^）/g，$1\t'）；
启动++；
changeLength++；
}
$this.val（前+选择+后）；
this.selectionStart=start；
this.selectionEnd=start+selection.length-changeLength；
}
}
如果（更换&&！e.shiftKey）{
$this.val（在+'\t'+之后）；
this.selectionStart=this.selectionEnd=start+1；
}
}
});
};
})（jQuery）；
$（函数（）{
$（“textarea”）.enableSmartTab（）；
})

/*只需要一些代码就可以用我们的新superTab进行编辑*/
（函数（$）{
$.fn.enableSmartTab=函数（）{
$this=$（this）；
$this.keydown（函数（e）{
if（（e.charCode==9 | | e.keyCode==9）和&！e.metaKey和&！e.ctrlKey和&！e.altKey）{
e、 预防默认值（）；
}
}
}
}

在香草（默认）JS中，这将是：

var textareas=document.getElementsByTagName（'textarea'）；
如果（文本区域）{
对于（变量i=0；i

textarea{
边框：1px实心#cfcfcf；
宽度：100%；
左边距：0px；
顶部：0px；
底部：0px；
位置：绝对位置；
}

var x=10；
变量y=10；

在搜索谷歌时发现了这一点。我做了一个非常短的，还可以缩进和反向缩进文本选择：

    jQ(document).on('keydown', 'textarea', function(e) {
        if (e.keyCode !== 9) return;
        var Z;
        var S = this.selectionStart;
        var E = Z = this.selectionEnd;
        var A = this.value.slice(S, E);
        A = A.split('\n');
        if (!e.shiftKey)
            for (var x in A) {
                A[x] = '\t' + A[x];
                Z++;
            }
        else
            for (var x in A) {
                if (A[x][0] == '\t')
                    A[x] = A[x].substr(1);
                Z--;
            }
        A = A.join('\n');
        this.value = this.value.slice(0, S) + A + this.value.slice(E);
        this.selectionStart = S != E ? S : Z;;
        this.selectionEnd = Z;
        e.preventDefault();
    });

在（多个）textarea元素内启用制表符

更正@alexwells答案并启用实时演示

var textarearay=document.queryselectoral（“textarea”）；
对于（var i=textareararay.length-1；i>=0；i--）{
textAreaArray[i].addEventListener（'keydown'，函数（e）{
如果（e.keyCode==9）{//tab被按下
//获取插入符号位置/选择
var start=this.selectionStart；
var end=this.selectionEnd；
var目标=e.target；
var值=目标值；
//将textarea值设置为：插入符号前的文本+制表符+插入符号后的文本
target.value=value.substring（0，开始）
+“\t”
+值。子字符串（结束）；
//再次将插入符号置于正确位置（为选项卡添加一个）
this.selectionStart=this.selectionEnd=start+1；
//防止焦点丢失
e、 预防默认值（）；
}
}，假）；
}

@Amine:阻止浏览器的默认选项卡功能。我现在知道这没有必要。我将对此进行搜索。编辑：

返回false

似乎包括

防止默认值

：。也实现了选择覆盖。@sergzach:我的解决方案在IE8中根本不起作用，因为它不支持

选择启动

/

selectionEnd

。您必须创建文本范围，但我仍然不明白它是如何工作的，我担心…这会阻止浏览器撤消功能（Ctrl+z）不确定如何/为什么会丢失此功能，在最后一个子字符串调用时，应将start作为第一个参数：

+value.substring（start，end））；

--否则，选择文本时使用制表符会删除文本。若要将此应用于所有文本区域，请使用querySelectorAll，枚举返回的列表，并将事件侦听器添加到每个元素。若要获取

    jQ(document).on('keydown', 'textarea', function(e) {
        if (e.keyCode !== 9) return;
        var Z;
        var S = this.selectionStart;
        var E = Z = this.selectionEnd;
        var A = this.value.slice(S, E);
        A = A.split('\n');
        if (!e.shiftKey)
            for (var x in A) {
                A[x] = '\t' + A[x];
                Z++;
            }
        else
            for (var x in A) {
                if (A[x][0] == '\t')
                    A[x] = A[x].substr(1);
                Z--;
            }
        A = A.join('\n');
        this.value = this.value.slice(0, S) + A + this.value.slice(E);
        this.selectionStart = S != E ? S : Z;;
        this.selectionEnd = Z;
        e.preventDefault();
    });