Javascript 使用制表符在文本区域缩进

我的网站上有一个简单的HTML文本区

现在，如果单击其中的Tab，它将转到下一个字段。我想让选项卡按钮缩进几个空格

---

我怎样才能做到这一点？

您必须编写JS代码来捕捉TAB键并插入大量空格。类似于JSFiddle所做的事情

检查jquery：

HTML：

<textarea id="mybox">this is a test</textarea>

$('#mybox').live('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    alert('tab pressed');
  } 
});
​

---

大量借用其他类似问题的答案（张贴在下面）

document.getElementById（'textbox'）.addEventListener（'keydown'，函数（e）{
如果（e.key=='Tab'）{
e、 预防默认值（）；
var start=this.selectionStart；
var end=this.selectionEnd；
//将textarea值设置为：插入符号前的文本+制表符+插入符号后的文本
this.value=this.value.substring（0，开始）+
“\t”+此.value.substring（结束）；
//再次将插入符号置于正确位置
这是selectionStart=
this.selectionEnd=start+1；
}
});
正如其他人所写，您可以使用JavaScript捕获事件，阻止默认操作（以便光标不会移动焦点）并插入制表符

但是，禁用默认行为会导致不使用鼠标就无法将焦点移出文本区域。盲人用户只使用键盘与网页交互，其他什么都不用——他们看不到鼠标指针可以用它做任何有用的事情，所以只能用键盘或什么都不用。tab键是浏览文档，尤其是表单的主要方式。重写tab键的默认行为将使盲用户无法将焦点移动到下一个表单元素

因此，如果你要为广大读者编写一个网站，我建议在没有令人信服的理由的情况下不要这样做，并为盲人用户提供一种不会将他们困在文本区域的替代方法。
按住ALT键并从数字键盘按0,9。它在google chrome中工作
基于人们在这里对答案所说的一切，它只是一个keydown（而不是keydup）+preventDefault（）+在插入符号处插入制表符的组合。比如：

var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
   e.preventDefault();
   insertAtCaret('txt', '\t')
}

前面的答案有一个工作的JSFIDLE，但它在keydown上使用了一个alert（）。如果删除此警报，则它不起作用。我刚刚添加了一个函数，可以在文本区域的当前光标位置插入一个选项卡

下面是一个同样适用的JSFIDLE：
var textareas=document.getElementsByTagName（'textarea'）；
变量计数=textareas.length；
对于（var i=0；i请尝试以下简单的jQuery函数：

$.fn.getTab = function () {
    this.keydown(function (e) {
        if (e.keyCode === 9) {
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;
            this.value = val.substring(0, start) + '\t' + val.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
            return false;
        }
        return true;
    });
    return this;
};

$("textarea").getTab();
// You can also use $("input").getTab();

基于@kasdega解决方案的多行索引脚本

$（'textarea'）。打开（'keydown'，函数（e）{
var keyCode=e.keyCode | | e.which；
如果（键代码===9）{
e、 预防默认值（）；
var start=this.selectionStart；
var end=this.selectionEnd；
var val=该值；
选择的var=val.substring（开始、结束）；
变量re=/^/gm；
变量计数=选定的.match（re）.length；
this.value=val.substring（0，开始）+所选。替换（re），\t'）+val.substring（结束）；
this.selectionStart=start；
this.selectionEnd=结束+计数；
}
});
在AngularJS环境中尝试使用@kasdega的答案时，我没有取得任何进展，我尝试过的任何东西似乎都无法使AngularJS改变。因此，如果这对过路人有用，这里是对@kasdega代码的重写，AngularJS风格，对我来说很有效：

app.directive('ngAllowTab', function () {
    return function (scope, element, attrs) {
        element.bind('keydown', function (event) {
            if (event.which == 9) {
                event.preventDefault();
                var start = this.selectionStart;
                var end = this.selectionEnd;
                element.val(element.val().substring(0, start) 
                    + '\t' + element.val().substring(end));
                this.selectionStart = this.selectionEnd = start + 1;
                element.triggerHandler('change');
            }
        });
    };
});

以及：

此解决方案允许像典型的代码编辑器一样在整个选择中使用tab键，并取消对该选择的标记。但是，我还没有弄清楚在没有选择的情况下如何实现shift tab


$（'#txtInput'）。打开（'keydown'，函数（ev）{
var keyCode=ev.keyCode | ev.which；
if（keyCode==9）{
ev.preventDefault（）；
var start=this.selectionStart；
var end=this.selectionEnd；
var val=该值；
选择的var=val.substring（开始、结束）；
var-re，计数；
if（电动换档钥匙）{
re=/^\t/gm；
count=-selected.match（re）.length；
this.value=val.substring（0，开始）+选中。替换（re），）+val.substring（结束）；
//todo:添加对无需选择的shift选项卡的支持
}否则{
re=/^/gm；
计数=所选。匹配（重新）。长度；
this.value=val.substring（0，开始）+所选。替换（re），\t'）+val.substring（结束）；
}
如果（开始==结束）{
this.selectionStart=结束+计数；
}否则{
this.selectionStart=start；
}
this.selectionEnd=结束+计数；
}
})；
#txtInput{
字体系列：monospace；
宽度：100%；
框大小：边框框；
高度：200px；
}

$（文档）.ready（函数（）{
$（“#msgid”）.html（“这是JQuery提供的Hello World”）；
});
如果您确实需要选项卡，请从word或记事本复制一个选项卡，并将其粘贴到所需的文本框中

1 2 3

12 22 33

不幸的是，我认为他们删除了这些评论中的标签：）
它将在您的帖子中显示为%09或GET
我必须创建一个函数来执行相同的操作，它使用起来很简单，只需将此代码复制到脚本中并使用：
enableTab（HTMLElement）
HTMLElement类似于
document.getElementById（id）

代码是：

function enableTab(t){t.onkeydown=function(t){if(9===t.keyCode){var e=this.value,n=this.selectionStart,i=this.selectionEnd;return this.value=e.substring(0,n)+" "+e.substring(i),this.selectionStart=this.selectionEnd=n+1,!1}}}

以上答案都是历史记录。对于那些正在寻找解决方案但没有做到这一点的人，我花了最后一个小时为Chrome编写了以下代码：

jQuery.fn.enableTabs = function(TAB_TEXT){
    // options
    if(!TAB_TEXT)TAB_TEXT = '\t';
    // text input event for character insertion
    function insertText(el, text){
        var te = document.createEvent('TextEvent');
        te.initTextEvent('textInput', true, true, null, text, 9, "en-US");
        el.dispatchEvent(te);
    }
    // catch tab and filter selection
    jQuery(this).keydown(function(e){
        if((e.which || e.keyCode)!=9)return true;
        e.preventDefault();
        var contents = this.value,
            sel_start = this.selectionStart,
            sel_end = this.selectionEnd,
            sel_contents_before = contents.substring(0, sel_start),
            first_line_start_search = sel_contents_before.lastIndexOf('\n'),
            first_line_start = first_line_start_search==-1 ? 0 : first_line_start_search+1,
            tab_sel_contents = contents.substring(first_line_start, sel_end),
            tab_sel_contents_find = (e.shiftKey?new RegExp('\n'+TAB_TEXT, 'g'):new RegExp('\n', 'g')),
            tab_sel_contents_replace = (e.shiftKey?'\n':'\n'+TAB_TEXT);
            tab_sel_contents_replaced = (('\n'+tab_sel_contents)
                .replace(tab_sel_contents_find, tab_sel_contents_replace))
                .substring(1),
            sel_end_new = first_line_start+tab_sel_contents_replaced.length;
        this.setSelectionRange(first_line_start, sel_end);
        insertText(this, tab_sel_contents_replaced);
        this.setSelectionRange(first_line_start, sel_end_new);
    });
};

简而言之，选项卡插入到选定行的开头

JSFiddle：

要点：

用法示例：
$（'textarea'）。启用选项卡（'\t'）

缺点：仅适用于Chrome原样。
Github上有一个库，用于wjbryant在您的文本区域提供选项卡支持：

这就是它的工作原理：

// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');

// enable Tab Override for all textareas
tabOverride.set(textareas);

为了它的价值，这是我的一行，为了你们所有人
function enableTab(t){t.onkeydown=function(t){if(9===t.keyCode){var e=this.value,n=this.selectionStart,i=this.selectionEnd;return this.value=e.substring(0,n)+" "+e.substring(i),this.selectionStart=this.selectionEnd=n+1,!1}}}

jQuery.fn.enableTabs = function(TAB_TEXT){
    // options
    if(!TAB_TEXT)TAB_TEXT = '\t';
    // text input event for character insertion
    function insertText(el, text){
        var te = document.createEvent('TextEvent');
        te.initTextEvent('textInput', true, true, null, text, 9, "en-US");
        el.dispatchEvent(te);
    }
    // catch tab and filter selection
    jQuery(this).keydown(function(e){
        if((e.which || e.keyCode)!=9)return true;
        e.preventDefault();
        var contents = this.value,
            sel_start = this.selectionStart,
            sel_end = this.selectionEnd,
            sel_contents_before = contents.substring(0, sel_start),
            first_line_start_search = sel_contents_before.lastIndexOf('\n'),
            first_line_start = first_line_start_search==-1 ? 0 : first_line_start_search+1,
            tab_sel_contents = contents.substring(first_line_start, sel_end),
            tab_sel_contents_find = (e.shiftKey?new RegExp('\n'+TAB_TEXT, 'g'):new RegExp('\n', 'g')),
            tab_sel_contents_replace = (e.shiftKey?'\n':'\n'+TAB_TEXT);
            tab_sel_contents_replaced = (('\n'+tab_sel_contents)
                .replace(tab_sel_contents_find, tab_sel_contents_replace))
                .substring(1),
            sel_end_new = first_line_start+tab_sel_contents_replaced.length;
        this.setSelectionRange(first_line_start, sel_end);
        insertText(this, tab_sel_contents_replaced);
        this.setSelectionRange(first_line_start, sel_end_new);
    });
};

// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');

// enable Tab Override for all textareas
tabOverride.set(textareas);

function textControl (element, event)
{
    if(event.keyCode==9 || event.which==9)
    {
        event.preventDefault();
        var s = element.selectionStart;
        element.value = element.value.substring(0,element.selectionStart) + "\t" + element.value.substring(element.selectionEnd);
        element.selectionEnd = s+1; 
    }
}

<textarea onkeydown="textControl(this,event)"></textarea>

function allowTab(input)
{
    input.addEventListener("keydown", function(event)
    {
        if(event.keyCode == 9)
        {
            event.preventDefault();

            var input = event.target;

            var str = input.value;
            var _selectionStart = input.selectionStart;
            var _selectionEnd = input.selectionEnd;

            str = str.substring(0, _selectionStart) + "\t" + str.substring(_selectionEnd, str.length);
            _selectionStart++;

            input.value = str;
            input.selectionStart = _selectionStart;
            input.selectionEnd = _selectionStart;
        }
    });
}

window.addEventListener("load", function(event)
{
    allowTab(document.querySelector("textarea"));
});

<textarea></textarea>

<textarea id="myArea"></textarea>
<script>
document.getElementById("myArea").addEventListener("keydown",function(event){
    if(event.code==="Tab"){
        var cIndex=this.selectionStart;
        this.value=[this.value.slice(0,cIndex),//Slice at cursor index
            "\t",                              //Add Tab
            this.value.slice(cIndex)].join('');//Join with the end
        event.stopPropagation();
        event.preventDefault();                //Don't quit the area
        this.selectionStart=cIndex+1;
        this.selectionEnd=cIndex+1;            //Keep the cursor in the right index
    }
});
</script>

$("textarea").keydown(function(event) {
    if(event.which===9){
        var cIndex=this.selectionStart;
        this.value=[this.value.slice(0,cIndex),//Slice at cursor index
            "\t",                              //Add Tab
            this.value.slice(cIndex)].join('');//Join with the end
        event.stopPropagation();
        event.preventDefault();                //Don't quit the area
        this.selectionStart=cIndex+1;
        this.selectionEnd=cIndex+1;            //Keep the cursor in the right index
    }
});

$('#your-textarea').keydown(function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode === $.ui.keyCode.TAB) {
        e.preventDefault();

        const TAB_SIZE = 4;

        // The one-liner that does the magic
        document.execCommand('insertText', false, ' '.repeat(TAB_SIZE));
    }
});

textarea_enable_tab_indent = function(textarea) {    
    textarea.onkeydown = function(e) {
        if (e.keyCode == 9 || e.which == 9){
            e.preventDefault();
            var oldStart = this.selectionStart;
            var before   = this.value.substring(0, this.selectionStart);
            var selected = this.value.substring(this.selectionStart, this.selectionEnd);
            var after    = this.value.substring(this.selectionEnd);
            this.value = before + "    " + selected + after;
            this.selectionEnd = oldStart + 4;
        }
    }
}

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

    // set textarea value to: text before caret + tab + text after caret
    document.execCommand("insertText", false, '    ');