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, this makes the cursor jump to the end of the text box after each keypress, which makes inline editing impossible.

Here is it in action:

http://jsbin.com/ifufuv/2

Does anyone know how to make it so the cursor does not jump to the end of the input box?

I strongly recommend that you choose a better event to handle. onkeyup is poor for detecting user input. See whattheheadsaid.com/2010/09/…. — Andy E
– Andy E, Commented Nov 21, 2011 at 23:15
Here's a fully realised example of how to maintain the selection when replacing the value of a textarea: stackoverflow.com/questions/3286595/… — Tim Down
– Tim Down, Commented Nov 22, 2011 at 0:13

Community · Accepted Answer · 2017-05-23 11:47:14Z

32

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

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Apr 3, 2015 at 23:20

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

romuleald Over a year ago

I did a quick gist based on your code with a function to refactor easily gist.github.com/romuleald/f1b980d5ad01b9f525e8e0244f91711a

Steven Zhou Over a year ago

Unfortunately this method doesn't work with input type="email".

gilly3 · Accepted Answer · 2011-11-21 23:07:42Z

18

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.

edited Nov 21, 2011 at 23:07

answered Nov 21, 2011 at 22:55

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

4 Comments

John Over a year ago

W3Schools have a wonderful example on how to use onkeypress to cancel keys (in their example, it cancels numbers, and you seem sufficiently capable to modify the regex to take out the characters you don't want). w3schools.com/jsref/event_onkeypress.asp

Andy E Over a year ago

@Mike: W3Schools doesn't really deserve people like you promoting their website for them. Take a look at w3fools.com - a lot of information at w3s is wrong or promoting bad practices for developers. There are much better resources on the web, like quirksmode.org or developer.mozilla.org.

John Over a year ago

Fair enough point, I was unaware of the issues with that site.

Tim Down Over a year ago

See stackoverflow.com/questions/3286595/… for my implementation of this basic technique.

Mike · Accepted Answer · 2018-07-27 22:15:00Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related