文本框是Web输入必不可少的一个控件，虽说现在有了很多所见所的的编辑器，但是在做一些输入比较简单的功能的时候，总不能引入一个庞大的编辑器代码是吧？比如说，syntax-heighlighter 的代码输入框。

一般情况下，textarea写些示例代码已经够用了。但是遇到需要缩进的时候就比较蛋疼。页面上的Tab按钮默认行为是跳转焦点，无法实现对文本框的内容进行缩进。如果要缩进，就得自己敲4个空格，天啊，敲死我咩～～

所以，想要不蛋疼，就得做hack。more

话说textarea有两个很好用的属性，selectionStart、selectionEnd（不确定ie是否有这两个属性，但是本人基本都不考虑ie了，[抠鼻]。实在不想放弃ie，也是可以用它的range的一些方法实现的，可以参考这个文章），分别表示当前被选中内容的开头和结尾。当selectionStart == selectionEnd的时候，表示没有选中内容，表现为一个闪呀闪呀的光标（一闪一闪亮晶晶……）。

因此，监听textarea的keydown事件，在按下tab的时候，往selectionStart的前面插入4个空格就达到我们想要的功能了。代码如下：

var onTextareaKeydown = function(e){
    if(e.keyCode == 9){
        e.preventDefault();
        var start = this.selectionStart, end = this.selectionEnd;
        var text = this.value;
        var tab = '    ';
        text = text.substr(0, start) + tab + text.substr(start);
        this.value = text;
        this.selectionStart = start + tab.length;
        this.selectionEnd = end + tab.length;
    }
}
document.getElementById('textarea').onkeydown = onTextareaKeydown;

点击这里查看活生生的小例子。

这个代码的实现还是比较简单的，不支持对选中多行的缩进。不过，能缩进单行了，多行还会远吗？