javascript – 在 textarea 插入符号移动时执行

Question

我有 textarea，我想更改说明插入符号（光标）后面的字符的文本。

<textarea id="text"></textarea>
<br/>
Character after the caret: <span id="char"></span>

我知道如何获得插入符号位置。问题是我不知道当用户移动插入符号时会调用什么事件（通过键入、按箭头键、单击、粘贴文本、剪切文本等）。

Answer 1

当选择更改时，会发生一个事件selectionchange。

该selectionchange事件是全局事件，因此可以在任何元素上添加侦听器，尽管有一个实验性功能，其中输入元素和 textarea 元素上的事件侦听器仅侦听该元素内选择的更改。目前仅 Firefox 支持实验版本。

然后可以通过 访问该选择getSelection()。在一些浏览器中，如果选择位于输入或文本区域元素内，则返回未定义，因此如果getSelection()返回未定义，selectionStart并且selectionEnd可以工作。

全局选择更改事件的示例：

let counter = 0;

document.addEventListener("selectionchange", function () {
  document.querySelector("#counter").textContent = ++counter;
})

<textarea>sample text</textarea>
<p>sample text in a paragraph</p>
<p contenteditable>a paragraph you can edit</p>

<p><code>selectionchange</code> events: <span id="counter">0</span></p>

Answer 2

我不认为有一个内置的事件来检查，但你可以使用的组合keypress，mousedown以及可以触发插入符的位置变化，那么其他活动检查更改文本区域的selectionStart（表示插入符的位置）：

const textarea = document.querySelector('textarea');
textarea.addEventListener('keypress', checkcaret); // Every character written
textarea.addEventListener('mousedown', checkcaret); // Click down
textarea.addEventListener('touchstart', checkcaret); // Mobile
textarea.addEventListener('input', checkcaret); // Other input events
textarea.addEventListener('paste', checkcaret); // Clipboard actions
textarea.addEventListener('cut', checkcaret);
textarea.addEventListener('mousemove', checkcaret); // Selection, dragging text
textarea.addEventListener('select', checkcaret); // Some browsers support this event
textarea.addEventListener('selectstart', checkcaret); // Some browsers support this event

let pos = 0;
function checkcaret() {
  const newPos = textarea.selectionStart;
  if (newPos !== pos) {
    console.log('change to ' + newPos);
    pos = newPos;
  }
}

<textarea></textarea>