代码之家 › 专栏 › 技术社区 › jiwopene

移动textarea插入符号时执行javascript

caret addeventlistener textarea events javascript

jiwopene · 技术社区 · 7 年前

我有textarea,我想更改说明插入符号(光标)后面的字符的文本。

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

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

1 回复 | 直到 7 年前

jiwopene 7 年前

我不认为有一个内置的事件来检查这一点,但你可以使用 keypress , mousedown ,以及其他可能触发插入符号位置更改的事件,然后检查textarea的 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;
  }
}