我有文本区域,我想更改说明插入符号(光标)后是什么字符的文本。
<textarea id="text"></textarea>
<br/>
Character after the caret: <span id="char"></span>
我知道如何获得插入位置。问题是我不知道当用户移动插入符时调用了什么事件(通过键入、按箭头键、单击、粘贴文本、剪切文本……)。
最佳答案
我不认为有内置事件可以检查这一点,但您可以结合使用 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 插入符号时执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53999384/