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

Question

我试图在单击向下 鼠标重新定位后立即获取文本光标的位置。问题是 selectionStart 和 selectionEnd 不返回光标的最新位置，因为"new"位置在点击 之前不会被存储发布。当您尝试使用鼠标重新定位插入符号时，代码片段会显示此问题。

这很奇怪，因为从技术上讲，我可以在单击鼠标后立即在"new"位置键入内容，但 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>