javascript - выполнить при перемещении каретки текстового поля

У меня есть текстовое поле, и я хочу изменить текст, в котором говорится, какой символ стоит после каретки (курсора).

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

Я знаю, как получить позицию каретки. Проблема в том, что я не знаю, какое событие вызывается, когда пользователи перемещают курсор (вводя, нажимая клавиши со стрелками, щелкая, вставляя текст, вырезая текст,…).


javascript events addeventlistener textarea caret
person jiwopene    schedule 01.01.2019    source источник
comment
Вы можете объяснить причину своей проблемы? Кто-то может предложить другое решение вашей, возможно, проблемы XY.   -  person Roko C. Buljan    schedule 02.01.2019
comment
возможно, вы могли бы использовать одно из решений в этом сообщении вместе с событием изменения текстового поля: stackoverflow.com/questions/7745867/   -  person kSp    schedule 02.01.2019
comment
@kSp Да, я знаю, как это сделать. См. Мою правку, пожалуйста.   -  person jiwopene    schedule 02.01.2019

Ответы (1)


arrow_upward
8
arrow_downward

Я не думаю, что есть встроенное событие для проверки этого, но вы можете использовать комбинацию 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>

person CertainPerformance    schedule 01.01.2019
comment
Я думаю, что для этого тоже нет мероприятия. Поэтому я должен прослушивать все события, которые перемещают курсор (keyup, keypress, cut, paste, mousemove, click,…). - person jiwopene; 02.01.2019
comment
Вы должны использовать (вместо click) mousedown touchstart touchmove и т. Д. И т.д ... Кроме того, это caret, а не carat ???? - person Roko C. Buljan; 02.01.2019
comment
Мне также понадобился keyup для перемещения клавиш со стрелками (linux, firefox 80.0). - person Beni Cherniavsky-Paskin; 06.10.2020