更改 <textarea> 压痕宽度

Question

我想使用<textarea>上的选项卡启用4宽度缩进。 当前， "\\t"添加一个8宽度的缩进。 如何将其更改为4？ 切换4个空格的"\\t"无效，导致添加了一个空格，而不是我想要的4个空格。

<!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"></textarea>
  </body>
</html>

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

塔普拉的答案对我有用：

<!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 个解决方案

解决方案1
1 已采纳 2018-07-25 21:33:03

解决方案2
0 2018-07-25 21:05:36

更改 <textarea> 压痕宽度

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-07-25 21:33:03

解决方案2 0 2018-07-25 21:05:36

解决方案1
1 已采纳 2018-07-25 21:33:03

解决方案2
0 2018-07-25 21:05:36