Set input cursor to proper position after javascript regex

Question

After regex is called cursor goes to end. So I tried that fix, that also did not work properly. How can that be fixed? My target: if field empty and digits is typed > cursor at end, if back to add or delete any digit > cursor at proper position(not at end)

document.getElementById('target').addEventListener('input', function (e) {
  var target = e.target,
      position = target.selectionStart; // Capture initial position

  target.value = target.value.replace(/\B(?=(\d{3})+(?!\d))/g, "-");// This triggers the cursor to move.

  target.selectionEnd = position;    // Set the cursor back to the initial position.
});

Fiddle

I misinterpreted thinking you wanted at the end, I posted a new answer explaining hot to put the cursor in the right place — Conrado Costa
– Conrado Costa, Commented Nov 12, 2015 at 15:51

Conrado Costa · Accepted Answer · 2015-11-12 15:46:26Z

2

Set the selection range to "position" that you created, and if you include a "-" you increment the position, like that:

document.getElementById('target').addEventListener('input', function (e) {
  var target = e.target,
  position = target.selectionStart; // Capture initial position

  var old = target.value;
  target.value = target.value.replace(/\B(?=(\d{3})+(?!\d))/g, "-");

  if(old != target.value)
    position++;
  target.setSelectionRange(position, position);
});

answered Nov 12, 2015 at 15:46

Conrado Costa

4352 silver badges12 bronze badges

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

1 Comment

IntoTheDeep Over a year ago

if I add another regex for example like jsfiddle.net/TeodorKolev/ku8bg0c9/3 how can I resolve it, cuz still jumps to end. Thanks

Victor Levin · Accepted Answer · 2015-11-12 15:01:20Z

0

Try setSelectionRange().

Your fiddle: **http://jsfiddle.net/ku8bg0c9/2/

I put 10000 for length as I don't think 10000 characters will ever be inputted. But you can set the length based on length of the input string.

document.getElementById('target').addEventListener('input', function (e) {
    var target = e.target,
        position = target.selectionStart; // Capture initial position

    target.value = target.value.replace(/\B(?=(\d{3})+(?!\d))/g, "-"); // This triggers the cursor to move.

    target.selectionEnd = position; // Set the cursor back to the initial position.

    target.setSelectionRange(10000, 10000);
});

answered Nov 12, 2015 at 15:01

Victor Levin

1,1877 silver badges12 bronze badges

1 Comment

IntoTheDeep Over a year ago

yes but after I back to add for example number after 2nd it goes to end > which is wrong

Collectives™ on Stack Overflow

Set input cursor to proper position after javascript regex

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related