How can I prevent user from inserting characters in Text Box other than Only numbers can insert jQuery Mobile

Question

I implemented iphone&android app in jQuery mobile.* i used **pure jQuery mobile

To enter phone `number in a text box. I used TYPE=”TEL”' this is for numaric keypad.

<input type="tel" style=" width:81%;" id="contactNumber" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />

But user can enter text also the text box which is unnecessary thing.

How can I prevent user from inserting characters other than numbers?

For mobile devices users it would be much more comfortable if the only input possibile is numeric, as they must press each button to get a number rather than a letter!

I tried adding TYPE=”TEL” TYPE=”mumber” in the input field, but it does not work to prevent.

possible duplicate of [How to allow only numeric (0-9) in HTML inputbox using jQuery?](http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — Jasper, Jul 13 '12 at 05:48

Dale · Accepted Answer · 2012-07-14T18:16:54.873

14

$(document).ready(function() {
    $('#contactNumber').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

This should replace any non-digit with an empty character *as they are put in, negating the need to search for more than one non-digit at a time.

edited Jul 14 '12 at 18:16

answered Jul 13 '12 at 05:40

Dale

1,220
2
10
20

$(document).ready(function() { $('#contactNumber').keyup(function() { var numbers = $(this).val(); $(this).val(numbers.replace(/\D/, '')); }); }); After I wrote this I realized this is not updating the value. Just rap numbers.replace() in a $(this).val() and that should be good. – Dale Jul 14 '12 at 18:14
I modified the answer. I realized that originally this wasn't updating the value of #contactNumber. Now, it is. I haven't used JQuery mobile before, so I don't know if it responds to .keyup in the usual way. You could throw this in as a quick test: $('#contactNumber').keyup(function() {alert("works");}); – Dale Jul 14 '12 at 18:20
Can you add a check for negative integers on this also. @Dale – choudhury smrutiranjan parida Feb 13 '15 at 10:44
I got it only + did that. $(this).val(numbers.replace(/\D+/, '')); worked. – choudhury smrutiranjan parida Feb 13 '15 at 10:50

score 7 · Answer 2 · answered Apr 24 '14 at 19:42

None of the above worked for me but I found a solution that works perfectly for what I needed (to disallow special characters in an input field). Prevents and alerts user.

    <script>
     $("#userlogin").keypress(function(e) {
      if (String.fromCharCode(e.which).match(/[^A-Za-z0-9_ ]/)) {
        e.preventDefault();
        alert("Special characters are not allowed. Use 'A-Z', 'a-z' and '0-9'.");
       }
     });
    </script>

score 1 · Answer 3 · answered Jul 13 '12 at 05:38

Seen this answered before. Check out http://www.texotela.co.uk/code/jquery/numeric/

And you can simply change your class id and have this code on your page:

$(document).ready(function(){
    $(".numeric").numeric();
});

If you don't want to use jQuery, you could write your own function and call it onkeyup event

See: http://www.htmlcodetutorial.com/forms/index_famsupp_158.html

Another option is using step attribute:

http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.step.float

<input type="number" step="0.01" min="0" >

score 1 · Answer 4 · answered Sep 24 '12 at 10:50

1

type="tel" is HTML 5, and not jqueryMobile. the later devices whose browsers support HTML 5 input types render these boxes fine. But for older versions, the additional scripts need to be there. The scrips are already posted in above answers.

answered Sep 24 '12 at 10:50

Tejas

6,508
1
21
25

score 0 · Answer 5 · answered May 20 '13 at 12:00

$('#contactNumber').bind('keypress', function (event) {
        event = event || window.event; canAdd = new Boolean(false);
        canAdd = ((event.charCode > 47) && (event.charCode < 58) || (event.charCode == 32) || (event.charCode == 40) || (event.charCode == 41) || (event.charCode == 43) || (event.charCode == 45) || (event.charCode == 124));
        if (!canAdd && event.charCode)
            return false;
    });

But better to use HTML5 tel attrubute

score 0 · Answer 6 · edited Mar 16 '18 at 06:14

HTML :

 input type="tel" (keypress)="isNumberKey($event)"

Script :

isNumberKey(evt: any) { < br >
        // to accept only numbers in contact field<br>
        if ( < br >
            (evt.key >= '0' && evt.key <= '9') || < br >
            evt.key == "Backspace" || < br >
            evt.key == "Delete" || < br >
            evt.key == "ArrowLeft" || < br >
            evt.key == "ArrowRight" < br >
        ) { < br > //"Backspace" etc for 'firefox' browser<br>
                return true; < br >
        } < br >
        return false; < br >
}

How can I prevent user from inserting characters in Text Box other than Only numbers can insert jQuery Mobile

6 Answers6