0

可能重复：
如何处理 textarea 中的 <tab>？

我需要一种方法来维护文本区域中的选项卡级别，到目前为止，这就是我所使用的：

<script type="text/javascript">
   $("textarea").keydown(function(e) {
      var $this, end, start;
      if (e.keyCode === 9) {
         start = this.selectionStart;
         end = this.selectionEnd;
         $this = $(this);
         $this.val(
            $this.val().substring(0, start)
            + "\t" + $this.val().substring(end)
         );
         this.selectionStart = this.selectionEnd = start + 1;
         return false;
      }
   });
</script>

但这只会插入标签（我在另一个 SO 帖子上发现了这个，所以我真的不知道它的作用，因为我不是 JS 专家）

当我按回车键时，这些选项卡有没有办法在那里？我需要这个，因为我正在为我的管理面板制作一个非常简单的代码编辑器（不需要语法高亮或任何东西）并且它使用 TextAreas。

谢谢！

4

1 回答 1

1

我绝对不认为这是一件艺术品，我在几分钟内就把它拼凑在一起了。它需要一些改进，但应该让你朝着正确的方向前进。

全局变量 

var keyPressed = null;
var timesPressed = 0;
var tabString = '';
var lastKeyPressed = null;

编辑——添加了一个重要的步骤来查看用户是否想要打破标签集。

Dom 就绪函数

$(function(){
    $("textarea").keydown(function(e) {
        var $this, end, start;
        if (e.keyCode === 9 || e.which === 9) {
            start = this.selectionStart;
            end = this.selectionEnd;
            $this = $(this);
            $this.val(
               $this.val().substring(0, start)
               + "\t" + $this.val().substring(end)
            );
            this.selectionStart = this.selectionEnd = start + 1;
            keyPressed = e.keyCode || e.which;
            timesPressed = timesPressed +1;
            return false;
        }else if((e.keyCode === 13 || e.which === 13) && keyPressed === 9){
            start = this.selectionStart;
            end = this.selectionEnd;
            $this = $(this);
            tabString += '\t';
            $this.val(
            $this.val().substring(0, start)
                + "\r"+tabString + $this.val().substring(end)
            );
            this.selectionStart = this.selectionEnd = start + timesPressed +1;
            lastKeyPressed = e.keyCode;
            return false;          
        }else if((e.keyCode === 8 || e.which === 8) && lastKeyPressed === 9){
            keyPressed = null;   
            timesPressed = 0; 
            tabString = '';     
        }
    }); 
});​

这是一个工作的jsFiddle

我真的没有很好的机会测试它太多。让我知道它是否太片状，我会回去重新制作它。

于 2012-10-18T01:33:46.227 回答