cursor go backward when triggered the regex in the replace, JavaScript

Question

I have attached the link to fiddle to simulate the problem I got.

eg: I entered 12345 > point the cursor in the middle 12|345 > type "space" > 123|45

the cursor will go backward after I type the "space".

Question: How can I make it stay at the same place as it is before?

document.querySelector("#removeSpace").onkeyup =  function()
{

    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.replace(/\s/g,"");
    this.setSelectionRange(start, end);
};

Perhaps, like this. Although you still can enter spaces, but they will get removed. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 8, 2018 at 10:47
cool, but can you explain a bit about this function, I appreciate that. function($0) { offset=$0.length; return ""; }) — codingDummy
– codingDummy, Commented Mar 8, 2018 at 10:55

Wiktor Stribiżew · Accepted Answer · 2018-03-09 07:48:27Z

1

You need to check if the whitespace was matched or not, and set the selection with the offset equal to the match length. However, to avoid the whitespace input, you may use input event:

$(function(){
  $('#removeSpace').bind('input', function(){
      var start = this.selectionStart,
            end = this.selectionEnd;
      var offset=0;
      this.value = this.value.replace(/\s+/g, function($0) {offset=$0.length; return "";});
      if (offset > 0)
    	   this.setSelectionRange(start-offset, end-offset);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="removeSpace" type="Text" />

The replace(/\s+/g, function($0) {offset=$0.length; return "";}) part matches 1 or more whitespaces and passes them to the callback via $0 variable. Its length is assigned to offset variable and is subtracted from the current start and end cursor positions. return "" removes the match, all the whitespaces found.

The same logic can be applied to fix your solution using keyup:

document.querySelector("#removeSpace").onkeyup =  function()
{
    
    var start = this.selectionStart,
        end = this.selectionEnd;
    var offset=0;
    this.value = this.value.replace(/\s+/g, function($0) {offset=$0.length; return "";});
    if (offset > 0)
    	this.setSelectionRange(start-offset, end-offset);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="removeSpace" type="Text" />

edited Mar 9, 2018 at 7:48

answered Mar 8, 2018 at 11:44

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

4 Comments

codingDummy Over a year ago

very helpful answer and well explained, thanks for provide the solution, appreciate that.

codingDummy Over a year ago

why is that this solution doesn't work in safari 5.1.7? the cursor will still going backward

Wiktor Stribiżew Over a year ago

@codingDummy I have no idea, I have never used Safari. I can't find any details on what there might be different. Perhaps, the input event is not supported. I added the code that should work for you even in Safari since it uses ECMAScript 5 regex related code, and is basically a fix for your code.

codingDummy Over a year ago

thanks for the answer, but onkeyup make things worse in safari, it will go back to the original problem. Well, thanks a lot.

Collectives™ on Stack Overflow

cursor go backward when triggered the regex in the replace, JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related