问题描述

我有一个简单的 html textarea 在我身边。现在，如果您点击其中的标签，它将进入下一个字段。我想让 tab 按钮缩进一些空格。我该怎么做？谢谢。

最佳解决方案

从类似问题的其他答案中大量借出 (下面发布)…

$(document).delegate('#textbox', 'keydown', function(e) {
  var keyCode = e.keyCode || e.which;

  if (keyCode == 9) {
    e.preventDefault();
    var start = $(this).get(0).selectionStart;
    var end = $(this).get(0).selectionEnd;

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

    // put caret at right position again
    $(this).get(0).selectionStart =
    $(this).get(0).selectionEnd = start + 1;
  }
});

jQuery: How to capture the TAB keypress within a Textbox

How to handle in textarea?

http://jsfiddle.net/jz6J5/

次佳解决方案

var textareas = document.getElementsByTagName('textarea');
var count = textareas.length;
for(var i=0;i<count;i++){
    textareas[i].onkeydown = function(e){
        if(e.keyCode==9 || e.which==9){
            e.preventDefault();
            var s = this.selectionStart;
            this.value = this.value.substring(0,this.selectionStart) + "t" + this.value.substring(this.selectionEnd);
            this.selectionEnd = s+1; 
        }
    }
}

此解决方案不需要 jQuery，并将启用页面上所有文本区域的标签功能。

第三种解决方案

如其他人所写，您可以使用 JavaScript 捕获事件，防止默认操作 (以便光标不移动焦点) 并插入制表符。

但是，禁用默认行为使得无法使用鼠标将焦点移出文本区域。盲人用户使用键盘与网页进行交互，没有其他内容 – 他们无法看到鼠标指针进行任何有用的操作，因此它是键盘或无。标签键是浏览文档，特别是表单的主要方式。覆盖 Tab 键的默认行为将使盲人不可能将焦点移动到下一个表单元素。

因此，如果您为广泛的受众群体编写了一个网站，我建议不要这样做，而不会有任何令人信服的理由，并为盲人提供某种替代方案，而不会将其陷入文本区域。

第四种方案

对于什么是值得的，这是我的 oneliner，你在这个主题中一直在谈论什么：



<textarea onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">
</textarea>

最新版本的 Chrome，Firefox，Internet Explorer 和 Edge 的测试。

第五种方案

我在一个 AngularJS 环境中试图使用 @ kasdega 的答案，我没有任何地方，我没有尝试似乎能够改变 Angular 的行为。所以如果这是对路人有用的，这里是 @ 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');
            }
        });
    };
});

和：

<textarea ng-model="mytext" ng-allow-tab></textarea>

第六种方案

您必须编写 JS 代码才能捕获 TAB 键并插入一堆空格。与 JSFiddle 类似的东西。

检查 jquery fiddle：

HTML：

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

JavaScript 的：

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

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

第七种方案

基于 @kasdega 解决方案的 Multiple-line indetation 脚本。

$('textarea').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode === 9) {
        e.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re = /^/gm;
        var count = selected.match(re).length;


        this.value = val.substring(0, start) + selected.replace(re, 't') + val.substring(end);
        this.selectionStart = start;
        this.selectionEnd = end + count;
    }
});

第八种方案

该解决方案允许在整个选择中标签，如您的典型代码编辑器，也可以取消选择。但是，当没有选择时，我还没有想出如何实现 shift-tab 。



$('#txtInput').on('keydown', function(ev) {
    var keyCode = ev.keyCode || ev.which;

    if (keyCode == 9) {
        ev.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re, count;

        if(ev.shiftKey) {
            re = /^t/gm;
            count = -selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, '') + val.substring(end);
            // todo: add support for shift-tabbing without a selection
        } else {
            re = /^/gm;
            count = selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, 't') + val.substring(end);
        }

        if(start === end) {
            this.selectionStart = end + count;
        } else {
            this.selectionStart = start;
        }

        this.selectionEnd = end + count;
    }
});
#txtInput {
  font-family: monospace;
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<textarea id="txtInput">
$(document).ready(function(){
	$("#msgid").html("This is Hello World by JQuery");
});
</textarea>

第九种方案

基于所有人不得不在这里回答的答案，它只是一个 keydown(而不是 keyup)+ preventDefault() +在插入符号插入一个标签字符的组合。就像是：

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

早期的答案有一个工作的 jsfiddle，但它使用一个 alert() 在键下。如果你删除这个警报，那么它没有工作。我刚刚添加了一个函数来在 textarea 中的当前光标位置插入一个选项卡。

这是一个工作的 jsfiddle 相同：http://jsfiddle.net/nsHGZ/

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。