0

I am trying to use regex to limit characters to only alphabets and numbers

$('#textbox').on("keypress", function (e) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    // How do I proceed?
});

However I am not sure how to proceed now? How do I handle copy paste?

j08691
  • 204,283
  • 31
  • 260
  • 272
Tom Hodder
  • 101
  • 4

3 Answers3

4

The input event should capture keys, pasting and other inputs etc. in newer browsers, and then it's just a matter of replacing anything that isn't a aplhanumeric character or number in the value.

I would use /W, it allows underscores and a few other characters, but filters out most other characters that aren't alphanumeric or numbers

$('#textbox').on("input", function (e) {
    this.value = this.value.replace(/\W/g, '');
});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • A nice solution! :) +1 – Afzaal Ahmad Zeeshan Jan 31 '14 at 18:41
  • I use this technique on edit box events. `[^\w_]+` should also work. –  Jan 31 '14 at 20:29
  • When I try to insert content in the middle of some text I entered, it throws the cursor to the end. How can I prevent that? – Tom Hodder Feb 01 '14 at 01:26
  • @TomHodder - Yes it does, and since it's also supposed to work with pasted content etc. you can't really just replace the character added last, you have to run the replace on the entire value, and replacing the value has the side effect of placing the caret at the end. The only way to avoid it is to get the caret position before the replace, and reset it after the replace, but that's rather complicated. – adeneo Feb 01 '14 at 01:36
  • 1
    @TomHodder - on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input) – adeneo Feb 01 '14 at 02:08
  • thanks..in all docs I see a small cap \w, however you have used a capital \W. Why so? – Tom Hodder Feb 01 '14 at 02:22
  • 1
    `\w` matches a-z, A-Z, 0-9 and underscore, in a regex the opposite would be using uppercase characters, so `\W` matches everyting ***but*** a-z, A-Z, 0-9 and underscore. It's the same with `\d`, which matches numbers, while `\D` matches everything *but* a number etc. – adeneo Feb 01 '14 at 02:26
  • Aha! Nice. One last question. Is this example (your code) working on your end http://jsfiddle.net/QJ5LK/2/. I am using 1.10.1 instead of 1.9 – Tom Hodder Feb 01 '14 at 02:32
  • @TomHodder - doesn't matter, this works in all versions of jQuery past 1.7 (when on() was introduced). – adeneo Feb 01 '14 at 02:36
  • Did you try that fiddle I posted. I just added \s to your code and it breaks – Tom Hodder Feb 01 '14 at 02:40
  • @TomHodder - Nope, didn't see it before, but you'll need a group and an OR to go with that -> http://jsfiddle.net/QJ5LK/3/ – adeneo Feb 01 '14 at 02:49
  • nopes it does not allow spaces jsfiddle.net/QJ5LK/3 – Tom Hodder Feb 01 '14 at 02:53
  • 1
    Oh, I see, didn't get it, I thought you where somehow getting spaces, but didn't want them. To allow spaces, you have to use something other than \W, something like this -> http://jsfiddle.net/QJ5LK/4/ – adeneo Feb 01 '14 at 03:03
0

Follow the remaining solution here

$('#textbox').on("keypress", function (e) {
    var re = new RegExp("^[a-zA-Z0-9]+$");
    var m = re.exec(e.keycode);
      if (m == null) {
        return false;
      } else{
           return true;
      }
}

Update: You should listen for 'input and propertyChangeEvent for handling the paste event and do some custom logic of getting rid of the unmatched chars. This depends on the business requirements though.

Community
  • 1
  • 1
Zeus
  • 6,386
  • 6
  • 54
  • 89
0

For my solution I used a trick for that - code needs to remove last written char from input field, to make it work. An example is my snippet.

And this is for your case.

$('#textbox').keyup(function (e) {
    this.value = this.value.replace(/[^a-z0-9]/ig, '');
});

And it will for for pasting values, as it searches and replaces a phone content of input. You can test it in this fiddle.

Deele
  • 3,728
  • 2
  • 33
  • 51
  • Does the keyup fire when pasting via right mouse click context menu? Or is there a general change event that covers it all? –  Jan 31 '14 at 20:35
  • @sln No, `keyup` is only for keyboard event. I didn't thought of that one. The answer that @adeneo gave, has that general change event called `input`, that I should've used in my answer, to cover mouse events. By updating my answer, it won't really differ from his answer, so I will leave it like it is right now. – Deele Feb 01 '14 at 03:16