我想在<textarea>上启用带选项卡的4宽度缩进。目前，"t"添加了一个8宽度的缩进。我怎么能把它改成4？将"t"切换为4个空格不起作用，导致添加了一个空格，而不是我想要的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>
您可以尝试下面的代码。
<!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( 代码在更改内容后会更新文本区域的选择范围。换句话说，我们必须将插入符号移回原来的位置，并保持良好的用户体验。
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>