Problem with regex expressions and Jquery on Input events

Question

having a problem using regular expression to allow only certain characters. The problem is when i try to insert a character into words to correct errors. When i try to insert the new char the cursor move to the end of the input box.

this is the code i use:

$('body').on('input','.info',function() {
        this.value = this.value.replace(/[^a-zA-Z0-9+&,*_\- \b \r ]/g, '');

Any hints?

Thank you in advance

CertainPerformance · Accepted Answer · 2020-05-15 08:57:26Z

2

You need to save the character index (the selectionStart) so you can reposition to it after value change is complete, if a value change needs to be made:

$('body').on('input', '.info', function(e) {
  const index = this.selectionStart - 1;
  const replaced = this.value.replace(/[^a-zA-Z0-9+&,*_\- \b \r ]/g, '');
  if (replaced !== this.value) {
    this.value = replaced;
    this.selectionStart = index;
    this.selectionEnd = index;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="info">

answered May 15, 2020 at 8:57

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Collectives™ on Stack Overflow

Problem with regex expressions and Jquery on Input events

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related