Javascript - выполнить при перемещении каретки текстового поля
У меня есть текстовое поле, и я хочу изменить текст, в котором говорится, какой символ стоит после каретки (курсора).
<textarea id = "text"></textarea>
<br/>
Character after the caret: <span id = "char"></span>
Я знаю, как получить позицию каретки. Проблема в том, что я не знаю, какое событие вызывается, когда пользователи перемещают курсор (вводя, нажимая клавиши со стрелками, щелкая, вставляя текст, вырезая текст,…).
возможно, вы могли бы использовать одно из решений в этом сообщении вместе с событием изменения текстового поля: stackoverflow.com/questions/7745867/…
@kSp Да, я знаю, как это сделать. См. Мою правку, пожалуйста.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('change to ' + newPos);
pos = newPos;
}
}<textarea></textarea>Я думаю, что для этого тоже нет мероприятия. Поэтому я должен прослушивать все события, которые перемещают курсор (keyup, keypress, cut, paste, mousemove, click,…).
Вы должны использовать (вместо click) mousedowntouchstarttouchmove и т.д.
Мне также нужен keyup для перемещения клавиш со стрелками (linux, firefox 80.0).
Вы можете объяснить причину своей проблемы? Кто-то может придумать другое решение для вашего, возможно, XY проблема.