javascript input masking for numeric and english keyboard only

Question

I have an input field that has a masking of "999999999". It works perfectly fine on English keyboard but I am also able to enter Japanese/Chinese characters into it (breaking the masking).

Is there a way to restrict the input to english keyboard numerics only?

<input type="text" id="pin" lang="en">

I also tried the following but it did not work.

$.fn.onlyNumeric = function(config) {
    var defaults = {
    }
    var options = $.extend(defaults, config);
    return this.each(function(){
        $(this).bind('keyup blur', function(){
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
    });
}

$('#pin').onlyNumeric();

Any help?

Can you post a couple japanese characters that present this issue? I'm trying this and it seems to work correctly: `'スが344d'.replace(/[^0-9]/g,'')` — fregante, Jan 04 '14 at 03:16

score 1 · Answer 1 · answered Jan 03 '14 at 18:25

1

You could try to use keypress event like this:

$('#pin').on('keypress',function(e){
    if(!$.isNumeric(String.fromCharCode(e.which))) return false;
});

SEE DEMO

answered Jan 03 '14 at 18:25

A. Wolff

74,033
9
94
155

OK so I tried that but I was still able to enter different keyboard (Japanese) characters. – night mare Jan 03 '14 at 18:38

Kei Minagawa · Answer 2 · 2014-01-03T23:55:18.730

I searched judging japanese character method for javascript in japanese. There is many japanese web site describing this. Sorry I don't know about jquery. I hope you may be able to get a hint in it. Here is a link I found.

http://javascript.eweb-design.com/1205_no.html

try sample page:

http://javascript.eweb-design.com/sample/s1205_1.html

I can't input japanese character in the input box on above sample page. It seems only [0-9] and [¥b] and ¥r char is allowed.

javascript input masking for numeric and english keyboard only

2 Answers2