Javascript HTML表单，使制表键触发缩进？

浏览器中的默认行为是选择下一个表单元素。我想我的文本框缩进代码，让我们说4个空格时，按下制表符。就像在IDE中缩进代码一样。如何在JavaScript中实现这种行为？如果我必须使用jQuery，或者更简单，我可以接受

---

谢谢

跟踪键代码并在元素中添加4个空格就可以了。按下tab键时，可以防止默认设置。是这样吗

在所有评论之后编辑：

啊，好吧，你们实际上需要几个JS函数（在文本区域中获取光标位置，更改文本，在文本区域中设置光标位置）。再多看一眼就知道了，但既然我是个好人，我会帮你把它放进去的。其他答案可在和中找到。我为你更新了最新版本。下面是代码更新

<script>

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

    if (thecode == 9) { 
        e.preventDefault(); 
        var html = $('#myarea').val();
        var pos = $('#myarea').getCursorPosition(); // get cursor position
        var prepend = html.substring(0,pos);
        var append = html.replace(prepend,'');
        var newVal = prepend+'    '+append;
        $('#myarea').val(newVal);
        $('#myarea').setCursorPosition(pos+4);
    } 
});

new function($) {
    $.fn.getCursorPosition = function() {
        var pos = 0;
        var el = $(this).get(0);
        // IE Support
        if (document.selection) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        // Firefox support
        else if (el.selectionStart || el.selectionStart == '0')
            pos = el.selectionStart;

        return pos;
    }
} (jQuery);

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if ($(this).get(0).setSelectionRange) {
      $(this).get(0).setSelectionRange(pos, pos);
    } else if ($(this).get(0).createTextRange) {
      var range = $(this).get(0).createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);
​
</script>

<textarea id="myarea"></textarea>

$（'#myarea'）。在（'keydown'，函数（e）{
var thecode=e.keyCode | | e.which；
如果（代码==9）{
e、 预防默认值（）；
var html=$（'#myarea'）.val（）；
var pos=$（'#myarea'）。getCursorPosition（）；//获取光标位置
var prepend=html.substring（0，pos）；
var append=html.replace（prepend“”）；
var newVal=prepend+“”+append；
$（'#myarea'）.val（newVal）；
$（'#myarea'）。设置光标位置（位置+4）；
} 
});
新函数（$）{
$.fn.getCursorPosition=函数（）{
var-pos=0；
var el=$（this.get）（0）；
//IE支持
if（文档选择）{
el.focus（）；
var Sel=document.selection.createRange（）；
var SelLength=document.selection.createRange（）.text.length；
Sel.moveStart（'字符'，-el.value.length）；
pos=Sel.text.length-SelLength；
}
//Firefox支持
else if（el.selectionStart | | el.selectionStart=='0'）
pos=el.selectionStart；
返回pos；
}
}（jQuery）；
新函数（$）{
$.fn.setCursorPosition=函数（位置）{
if（$（this）.get（0）.setSelectionRange）{
$（this）.get（0）.setSelectionRange（pos，pos）；
}else if（$（this）.get（0）.createTextRange）{
var range=$（this.get（0.createTextRange（）；
范围。塌陷（真）；
range.moveEnd（'字符'，位置）；
range.moveStart（'character'，pos）；
range.select（）；
}
}
}（jQuery）；
​

这看起来像是：如果您试图制作一个编辑器，您应该查看一下。它假设该选项卡已在字段末尾使用。您能否向我们提供最新的JSFIDLE（）？@Fike:是的，

.live（）

不受欢迎，因为jQuery~1.4.2支持

.delegate（）

。由于jQuery 1.7都不赞成使用

.on（）

@Fike:给我链接，我会调查的。很好，我为你改成了.on（）。此外，我意识到它应该使用.val（）而不是.html（），因为它是一个表单元素。我刚试过，效果很好@菲克：正如我上面所说，只有在最后编辑时它才起作用。选中此项：