Stop cursor from jumping to end of input field in javascript replace

Question

I\'m using a regular expression to strip invalid characters out of an text input area in javascript (running in IE). I run the replace function on every keyup event. However

Answer 1

You'll have to manually put the cursor back where you want it. For IE9, set .selectionStart and .selectionEnd (or use .setSelectionRange(start, end)). For IE8 and earlier, use .createTextRange() and call .moveStart() on the text range.

Answer 2

In addition to gilly3's answer, I thought someone might find it useful to see an actual code snippet.

In the example below, the selectionStart property is retrieved from the input element prior to the JavaScript string manipulation. Then selectionStart is set back to the initial position after the manipulation.

Depending on what you're trying to achieve, you could also access selectionEnd in place of selectionStart, and set a range: 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 3

I was running into the same issue, I found https://www.sitepoint.com/6-jquery-cursor-functions/ had the solution. here are 6 methods that will allow you to get/set the cursor position in an input/textarea. I believe this will work for content editable fields as well!

This was very helpful as the bug only showed for IE and Windows 7 combination.

Here is my Before code

$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, '- '));
});

and my after code which utilizes the jquery methods that I found on the website I stated above

$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);
});