Javascript 如何在按键事件发生后获取文本光标位置？

我正在写一个语法荧光笔。在输入文本和使用箭头键导航时，荧光灯应立即更新高亮显示

我面临的问题是，当触发“keypress”事件时，您仍然可以通过

window.getSelection（）

获得文本光标的旧位置

例如：

函数handleKeyEvent（evt）{
log（evt.type，window.getSelection（）.getRangeAt（0.startOffset））；
}
var div=document.querySelector（“div”）；
div.addEventListener（“按键向下”，handleKeyEvent）；
div.addEventListener（“按键”，handleKeyEvent）；
div.addEventListener（“输入”，handleKeyEvent）；
div.addEventListener（“键控”，handleKeyEvent）
foo
您可以使用
setTimeout
异步处理
keydown
事件：


函数handleKeyEvent（evt）{
setTimeout（函数（）{
log（evt.type，window.getSelection（）.getRangeAt（0.startOffset））；
}, 0);
}
var div=document.querySelector（“div”）；
div.addEventListener（“按键向下”，handleKeyEvent）
这是一些文本
下面是一个使用“keydown”事件纠正位置的解决方案：


函数handleKeyEvent（evt）{
var caretPos=window.getSelection（）.getRangeAt（0）.startOffset；
如果（evt.type==“按键关闭”）{
开关（电动钥匙）{
案例“ArrowRight”：
if（caretPos0）{
caretPos——；
}
打破
案例“ArrowUp”：
案例“家”：
caretPos=0；
打破
案例“箭头向下”：
案例“结束”：
caretPos=evt.target.innerText.length；
打破
违约：
返回；
}
}
console.log（caretPos）；
}
var div=document.querySelector（“div”）；
div.addEventListener（“按键向下”，handleKeyEvent）；
div.addEventListener（“输入”，handleKeyEvent）
foo
刚才有人在我的网站上提到还有一个，每次选择发生变化时，都会向文档触发

这样就可以通过调用
window.getSelection（）
获得正确的光标位置

例如：


功能手柄选择更改（evt）{
log（evt.type，window.getSelection（）.getRangeAt（0））；
}
文件。添加的列表（“selectionchange”，handleSelectionChange）
foo
我想您在使用按键事件时会遇到另一个问题。当按下箭头键时，Chrome似乎不会触发事件（Firefox会）。在status WontFix中有一个老的chromium bug描述了这一点：谢谢你的提示！对，不会触发
keypress
事件，但无论如何。正如我现在看到的，该规范声明建议人们在输入之前使用
事件。并且，
keydown
也会连续触发。尽管所有这些事件都被提前触发。我现在希望能得到一个合适的事件。光标位置/选择等仍然是所有浏览器支持的pita。有一段时间我需要这个，但与光标相关的东西非常可靠。使用
setTimeout（）
这种方式看起来有点像黑客，但很有效。所以，谢谢你！如果未来几天没有人能找到更好的解决办法，我会接受你的回答。我知道位置值的变化，我只是在我的示例中提供了一些简化的代码。
getRangeAt（0）
返回的范围还提供了
startContainer
属性中的文本节点，该属性是
startOffset
引用的，因此这不是问题。调用
setTimeout（fn，0）
是在当前调用堆栈完成后运行代码的一种众所周知的技术。你可以看到这些文章：；还有这个。