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

by

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

More Related Contents:

  1. How to replace all occurrences of a string in JavaScript
  2. How do I replace a character at a particular index in JavaScript?
  3. Replace multiple strings with multiple other strings
  4. Fastest method to replace all instances of a character in a string [duplicate]
  5. How to replace all dots in a string using JavaScript
  6. Replace multiple strings at once
  7. How to replace all occurrences of a string in JavaScript
  8. How can I remove a character from a string using JavaScript?
  9. RegEx for match/replacing JavaScript comments (both multiline and inline)
  10. Remove whitespace and line breaks between HTML elements using jQuery
  11. Replace a Regex capture group with uppercase in Javascript
  12. How to replace last occurrence of characters in a string using javascript
  13. Case insensitive string replacement in JavaScript?
  14. How do I replace all occurrences of a string in JavaScript?
  15. Javascript and backslashes replace
  16. How to trim a file extension from a String in JavaScript?
  17. JavaScript replace/regex
  18. Efficient Javascript String Replacement
  19. how to clear or replace a cached image
  20. Insert space before capital letters
  21. How can I perform a str_replace in JavaScript, replacing text in JavaScript?
  22. JavaScript – Replace all commas in a string [duplicate]
  23. Why can’t I use accented characters next to a word boundary?
  24. Reformat string containing date with Javascript
  25. `string.replace` doesn’t change the variable [duplicate]
  26. How do I replace all occurrences of “/” in a string with “_” in JavaScript?
  27. How to replace curly quotation marks in a string using Javascript?
  28. Javascript – Replacing the escape character in a string literal
  29. javascript replace globally with array
  30. JavaScript: replace last occurrence of text in a string

Leave a Comment