时间戳

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

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

问题描述

我试图在单击鼠标重新定位后立即获取文本光标的位置。问题是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>

标签： javascripthtmljqueryselectioncaret

解决方案

使用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>

推荐阅读