Остановить курсор от перехода к концу поля ввода в замене JavaScript

Question

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

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

http://jsbin.com/ifufuv/2

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

Answer 1

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

В приведенном ниже примере свойство 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's position, but you won't notice this.</p>
<input type="text" id="target" />

Answer 2

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

Answer 3

Я столкнулся с той же проблемой, я обнаружил, что https://www.sitepoint.com/6-jquery-cursor-functions/ имеет решение.Вот 6 методов, которые позволят вам получить / установить позицию курсора в поле ввода / текстовой области.Я полагаю, что это будет работать и для редактируемых полей контента!

Это было очень полезно, поскольку ошибка была показана только для комбинации IE и Windows 7.

Вот мой код "До"

$body.on('input paste','.replace-special-chars',function () {
    let coma = /‚/g;
    let doubleQuotes = /[“”]/g;
    let singleQuotes = /[‘’]/g;
    $(this).val($(this).val().replace(doubleQuotes,'"'));
    $(this).val($(this).val().replace(coma,','));
    $(this).val($(this).val().replace(singleQuotes,"'"));
    $(this).val($(this).val().replace(/[^\x00-\xff]/g, '- '));
});

и мой код после, который использует методы jquery, которые я нашел на сайте, который я указывал выше

$body.on('input paste','.replace-special-chars',function () {
    let position = $(this).getCursorPosition();
    let coma = /‚/g;
    let doubleQuotes = /[“”]/g;
    let singleQuotes = /[‘’]/g;
    $(this).val($(this).val().replace(doubleQuotes,'"'));
    $(this).val($(this).val().replace(coma,','));
    $(this).val($(this).val().replace(singleQuotes,"'"));
    $(this).val($(this).val().replace(/[^\x00-\xff]/g, '- '));
    $(this).setCursorPosition(position);
});