Question

我想使用</code>上的选项卡启用4宽度缩进。当前，<code>“ \ t” </code>添加一个8宽度的缩进。如何将其更改为4？将<code>“ \ t” </code>切换为4个空格不起作用，导致添加了一个空格，而不是我想要的4个空格。</p> <pre> <code> <！doctype html> <html> <头> <script src =“ https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script> <脚本> $（document）.ready（（）=> { $（'＃input'）。on（'keydown'，function（e）{ if（e.keyCode == 9 || e.which == 9）{ e.preventDefault（）; var s = this.selectionStart; $（this）.val（function（i，v）{ 返回v.substring（0，this.selectionStart）+“ \ t” + v.substring（this.selectionEnd） }）; this.selectionEnd = s + 1; } }）; }）; </script> </head> <身体> <textarea id =“ input” style =“ font-family：monospace”>

Answer 1

您可以尝试下面的代码。

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(() => {
        var SPACE = ' '.repeat(4);
        var $input = $('#input');
        $input.on('keydown', function(e) { 
            if (e.keyCode === 9 || e.which === 9) {
                e.preventDefault();
                var start = this.selectionStart;

                var txt = $input.val();
                txt = txt.substring(0, start) + SPACE + txt.substring(this.selectionEnd);
                $input.val(txt);

                start += SPACE.length;
                this.setSelectionRange(start, start);
            }
        });
    });
    </script>
  </head>
  <body>
      <textarea id="input" style="font-family:monospace"></textarea>
  </body>
</html>

您应注意：

（1）我将间距信息移到了一个单独的变量，以便以后可以轻松更改它（如果需要）。

（2）代码在更改内容后更新了文本区域的选择范围。换句话说，我们必须将插入符号移回原处，并保持良好的用户体验。

Answer 2

塔普拉（Taplar）的答案对我有用：

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(() => {
        $('#input').on('keydown', function(e) {
            if (e.keyCode == 9 || e.which == 9) {
                e.preventDefault();

                var s = this.selectionStart;
                $(this).val(function(i, v) {
                    return v.substring(0, this.selectionStart) + "\t" + v.substring(this.selectionEnd)
                });
                this.selectionEnd = s + 1;
            }
        });
    });
    </script>
  </head>
  <body>
      <textarea id="input" style="font-family:monospace;tab-size:4"></textarea>
  </body>
</html>

更改<textarea>缩进宽度

2 个答案: