javascript - выполнять при перемещении текстовой каретки - PullRequest
Новая
       36

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

0 голосов
/ 02 января 2019

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

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

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

1 Ответ

0 голосов
/ 02 января 2019

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