Question

我有文本区域，我想更改表示插入符号（光标）后是什么字符的文本。

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

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

Answer 1

我认为没有内置事件可以检查，但是您可以结合使用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>

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

1 个答案: