I need my regex to accept arrow keys, letters, and numbers. I got the letters and numbers, but im stuck on arrow keys. I have this so far.

var patt = /[^a-zA-Z0-9]+/g;
var helper;
$('#name').keyup(function(e){
    helper = $('#name').val();
    helper = helper.replace(patt,' ');
    $('#name').val(helper);
});

I need my regex to accept arrow keys, letters, and numbers. I got the letters and numbers, but im stuck on arrow keys. I have this so far.

var patt = /[^a-zA-Z0-9]+/g;
var helper;
$('#name').keyup(function(e){
    helper = $('#name').val();
    helper = helper.replace(patt,' ');
    $('#name').val(helper);
});

Thanks for any help.

• javascript
• jquery
• html
• regex

• 2 Regular expressions match text strings, and arrow keys don't generally generate text strings. What are you trying to do? – Amber Commented Feb 15, 2016 at 2:14
• @Amber Im trying to ignore arrow key input. I only want letters, numbers, arrow keys, and punctuation keys. When I hit the arrow keys, my pattern matches and puts me at the end of the line of text. – Zapp Commented Feb 15, 2016 at 2:17
• @Zapp How is that code being executed? Is it inside of a keypress/keydown/keyup event listener or something...? – Josh Crozier Commented Feb 15, 2016 at 2:20
• @JoshCrozier This is in a keyup event. I'll add the code – Zapp Commented Feb 15, 2016 at 2:22
• 2 This isn't a regex problem. Your code explicitly sets the value of the field, even if (depending on which key was pressed) the .replace() didn't do anything, and setting the value loses the cursor position. Note also that validating in a key event handler isn't enough, because the user can change the field via the Edit menu or by drag'n'drop. – nnnnnn Commented Feb 15, 2016 at 2:25

3 Answers 3

The problem is that you're replacing the element's entire value when the keyup event is fired. In doing so, the cursor will always be reset to the end.

To resolve this, you can capture the cursor's initial position by accessing the selectionStart property of the element. Then after replacing the value, you can simply set it back to where it initially was:

Here is an example in plain JS demonstrating this:

document.getElementById('name').addEventListener('input', function() {
  var position = this.selectionStart;
  
  this.value = this.value.replace(/[^a-zA-Z0-9]+/g, '');
  this.selectionEnd = position;
});

<input id="name" type="text" />

Likewise, the jQuery-version would be the same. I also changed the keyup event to an input event so that the event is only fired when the value is actually changed.

$('#name').on('input', function(e) {
  var position = this.selectionStart;

  this.value = this.value.replace(/[^a-zA-Z0-9]+/g, '');
  this.selectionEnd = position;
});

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

As an alternative, you could also just listen to the change event and then replace the value; however, this wouldn't update the value while typing.

When you press the arrow key you're changing the value of the input, so the cursor will lose its place. This is unrelated to the regex you're using.

You should not modify user input while they're typing. Instead do it on the .change() jQuery callback listener, not .keyup()

Another way is in keyup event callback, execute event.preventDefault(); , that solved my problem