如何处理textarea中的<tab>？

问题描述

| 我想要一个文本区域，可以处理按Tab键的情况。 在默认情况下，如果您按Tab键，则焦点将离开文本区域。但是，当用户想要在文本区域中输入tab键时会怎样呢？ 我可以捕捉到此事件并将焦点返回到文本区域并将标签添加到当前光标位置吗？     

解决方法

您可以：http://jsfiddle.net/sdDVf/8/。

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

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(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();
    }
});

    ,这是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);

我在Firefox 21.0和Chrome 27中对其进行了测试。不知道它是否可以在其他地方使用。     ,天哪，以前的所有答案都无法提供通常不错的（即对于程序员而言）选项卡控件。 也就是说，在选择的行上单击TAB将使这些行缩进，而SHIFTTAB将使它们缩进。 _edited（2016年11月）：将keyCode替换为charCode ||每个KeyboardEvent.charCode的keyCode-Web API | MDN

(function($) {
  $.fn.enableSmartTab = function() {
    var $this;
    $this = $(this);
    $this.keydown(function(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.preventDefault();
        start = this.selectionStart;
        end = this.selectionEnd;
        val = $this.val();
        before = val.substring(0,start);
        after = val.substring(end);
        replace = true;
        if (start !== end) {
          selection = val.substring(start,end);
          if (~selection.indexOf(\'\\n\')) {
            replace = false;
            changeLength = 0;
            lastNewLine = before.lastIndexOf(\'\\n\');
            if (!~lastNewLine) {
              selection = before + selection;
              changeLength = before.length;
              before = \'\';
            } else {
              selection = before.substring(lastNewLine) + selection;
              changeLength = before.length - lastNewLine;
              before = before.substring(0,lastNewLine);
            }
            if (e.shiftKey) {
              re = /(\\n|^)(\\t|[ ]{1,8})/g;
              if (selection.match(re)) {
                start--;
                changeLength--;
              }
              selection = selection.replace(re,\'$1\');
            } else {
              selection = selection.replace(/(\\n|^)/g,\'$1\\t\');
              start++;
              changeLength++;
            }
            $this.val(before + selection + after);
            this.selectionStart = start;
            this.selectionEnd = start + selection.length - changeLength;
          }
        }
        if (replace && !e.shiftKey) {
          $this.val(before + \'\\t\' + after);
          this.selectionStart = this.selectionEnd = start + 1;
        }
      }
    });
  };
})(jQuery);

$(function() {
  $(\"textarea\").enableSmartTab();
})

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<textarea rows=\"10\" cols=\"80\">
/* Just some code to edit with our new superTab */
(function($) {
    $.fn.enableSmartTab = function() {
        $this = $(this);
        $this.keydown(function(e) {
            if ((e.charCode === 9 || e.keyCode === 9) && !e.metaKey && !e.ctrlKey && !e.altKey) {
                e.preventDefault();
            }
        }
    }
}
</textarea>

,在Vanilla（默认）JS中，这是：

  var textareas = document.getElementsByTagName(\'textarea\');

  if ( textareas ) {
    for ( var i = 0; i < textareas.length; i++ ) {
      textareas[i].addEventListener( \'keydown\',function ( e ) {
      if ( e.which != 9 ) return;

      var start 			= this.selectionStart;
      var end				  = this.selectionEnd;

      this.value 			= this.value.substr( 0,start ) + \"\\t\" + this.value.substr( end );
      this.selectionStart = this.selectionEnd = start + 1;

      e.preventDefault();
      return false;
      });
    }
  }

textarea {
   border: 1px solid #cfcfcf;
   width: 100%;
   margin-left: 0px;
   top: 0px;
   bottom: 0px;
   position: absolute;
}

<textarea>

	var x = 10;
	var y = 10;

</textarea>

,在搜寻google时发现了这个。我做了一个很短的文章，它也可以缩进和缩进所选的文本：

    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 textAreaArray = document.querySelectorAll(\"textarea\");
    for (var i = textAreaArray.length-1; i >=0;i--){
        textAreaArray[i].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);
    }

<textarea rows=\"10\" cols=\"80\"></textarea>
   <textarea rows=\"10\" cols=\"80\"></textarea>