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

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 =,
      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" />

Leave a Comment