在情况(a)下,如下面的代码所示,我的处理程序在浏览器添加换行符之前执行,因此空格(或'--'用于说明)出现在行的末尾,而不是新行的开头。
在情况(b)下,如下面的代码中的注释所示,文本被正确修改,但是如果结果导致光标超出textarea视图,则内容不会滚动(很可能是因为内容滚动是默认处理的一部分),因此光标消失在textarea边界后面,只有当我发送另一个按键时(即不是换行符)才会重新出现。
如何在不失去默认滚动的情况下实现自动缩进效果?
我知道可以通过延迟插入空格(例如使用setTimeout())来近似实现此效果,以便运行时有足够的时间完成默认处理(即插入换行符和垂直滚动),但这对我来说似乎是一个巨大的修补程序,并且引入了一种我担心会在最不希望的情况下影响我的竞争条件(大规模复制粘贴,由于其他操作而导致运行时变慢,高键盘重复率等)。理想情况下,我希望(i)在默认处理之后调用我的代码或(ii)能够防止默认处理,运行我的代码,并明确调用默认处理。如何实现?
谢谢!
Greg
PS:我不感兴趣集成复杂的文本框替代品,例如Editarea(我使用一个,它在各个浏览器中非常脆弱)。
在FF3上测试过。
<html>
<head>
<script type="text/javascript">
function onKeyPressHandler(e) {
if (e.which == 13) // ASCII newline
{
var start = this.selectionStart;
var end = this.selectionEnd;
var v = this.value;
this.value = v.slice(0, start) + '--' + v.slice(end); // (a)
// (b): this.value = v.slice(0, start) + '\n--' + v.slice(end);
// (b): e.preventDefault();
}
}
onload = function() {
var editor = document.getElementById("editor");
editor.addEventListener('keypress', onKeyPressHandler, false);
}
</script>
</head>
<body>
<textarea rows="20" cols="80" id="editor"></textarea>
</body>
</html>
<html>
的内容并按回车键,你的代码会添加一个新行和六个空格(因为start
是6)。然后输入<body>
并按回车键。这将添加一个新行和16个空格。它需要找到前一行代码开始之前的空格数量,然后添加相应数量的空格。 - John Washam