Остановить курсор от прыжка до конца поля ввода в javascript replace

Я использую регулярное выражение для удаления недопустимых символов из области ввода текста в javascript (работает в IE). Я запускаю функцию replace при каждом событии keyup. Однако это приводит к тому, что курсор переходит в конец текстового поля после каждого нажатия клавиши, что делает невозможным встроенное редактирование.

Вот он в действии:

http://jsbin.com/ifufuv/2

Кто-нибудь знает, как сделать так, чтобы курсор не переходил в конец поля ввода?

Ответ 1

Вам нужно будет вручную поместить курсор туда, где вы хотите. Для IE9 установите .selectionStart и .selectionEnd (или используйте .setSelectionRange(start, end)). Для IE8 и более ранних версий используйте .createTextRange() и вызовите .moveStart() в текстовом диапазоне.

Ответ 2

В дополнение к gilly3 answer, я думал, что кому-то может показаться полезным увидеть фактический фрагмент кода.

В приведенном ниже примере свойство selectionStart извлекается из элемента input до манипуляции с строкой JavaScript. Затем selectionStart возвращается в исходное положение после манипуляции.

В зависимости от того, чего вы пытаетесь достичь, вы также можете получить доступ к selectionEnd вместо selectionStart и установить диапазон: setSelectionRange(start, end).

document.getElementById('target').addEventListener('input', function (e) {
  var target = e.target,
      position = target.selectionStart; // Capture initial position
  
  target.value = target.value.replace(/\s/g, '');  // This triggers the cursor to move.
  
  target.selectionEnd = position;    // Set the cursor back to the initial position.
});

<p>The method <code>.replace()</code> will move the cursor position, but you won't notice this.</p>
<input type="text" id="target" />