HTML 表单，使 Tab 键触发器缩进

HTML form, make tab key trigger indent?

本文关键字：触发器 缩进 Tab 表单 HTML      更新时间：2023-09-26

浏览器中的默认行为是选择下一个表单元素。我希望我的文本框缩进代码，比如说按下制表符时有 4 个空格。就像在 IDE 中缩进代码一样。如何在 JavaScript 中实现这种行为？如果我必须使用jQuery，或者它更容易，我很好。

谢谢！

跟踪键代码并向元素添加 4 个空格应该可以做到这一点。 可以在按下 Tab 键时阻止默认值。 这样？：

在所有评论后编辑：

啊，好吧，所以你实际上是在要求几个JS函数（获取文本区域中的光标位置，更改文本，设置文本区域中的光标位置）。 多环顾四周会给你所有这些，但既然我是个好人，我会把它放在那里给你。 其他答案可以在这篇关于getCursorPosition（）的文章和这篇关于setCursorPosition（）的文章中找到。 我为你更新了 jsFiddle。 这是代码更新

<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>
相关文章：