gpt4 book ai didi

javascript - 更改 <textarea> 缩进宽度

转载 作者:行者123 更新时间:2023-12-03 01:26:20 25 4
gpt4 key购买 nike

我想在 <textarea> 上启用带有制表符的 4 宽度缩进。目前,"\t"添加 8 宽度的缩进。我怎样才能将其更改为4?切换"\t" for 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) 代码在更改内容后更新文本区域的选择范围。换句话说,我们必须将插入符号移回原来的位置并保持良好的用户体验。

关于javascript - 更改 &lt;textarea&gt; 缩进宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51527536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com