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

Question

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

这很奇怪，因为从技术上讲，只要单击鼠标，我就可以在“新”位置键入，但 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>