每当按下光标或箭头键时，如何获取当前光标位置（在文本区域中）？

Question

我试图在单击一下后立即获取文本光标的位置。问题是，selectionStart并且selectionEnd不返回光标的最新位置，因为在释放单击之前不会存储“新”位置。当您尝试使用鼠标重新定位插入符号时，代码片段会显示此问题。

这很奇怪，因为从技术上讲，我可以在单击鼠标后立即在“新”位置键入内容，但selectionStart仍然返回旧位置。如果光标位置可以明显改变而无需释放单击，那么如何访问新位置而无需等待mouseup？

（这似乎也是在按键后跟踪光标位置的问题）

const input = document.getElementById('myInput');
input.addEventListener('mousedown', showposition); // click

function showposition() {
  document.getElementById("output").innerHTML += " " + input.selectionStart;
}

<input id="myInput">
<p id="output"></p>

Answer 1

使用click事件而不是mousedown事件。这是因为，在触发 mousedown 事件时，selectionStart不会更新，这就是为什么您不断获取以前的值。

另一方面，单击事件是mouseup+mousedown事件的组合，它捕获一次完整的鼠标单击并返回预期的光标位置值。

const input = document.getElementById('myInput');
input.addEventListener('click', showposition); // click

function showposition(event) {
  document.getElementById("output").innerHTML += " " + event.target.selectionStart;
}

<input id="myInput">
<p id="output"></p>