1

This question deals with allowing only numeric characters to be entered in an input text field. I am needing to do the same thing, except that negative sign and decimal must be allowed. Also the solution needs to work in Mobile Safari, for iOS 6 and iOS 7.

I have tested the accepted solution which is based on checking keycodes in the keyup event handler, but this solution does not work on my iPad because it allows the following characters to be entered:

()$&@!

The code below is based on this solution:

('input.numeric').keyup(function(e) {
    this.value = (this.value.replace(/[^0-9.\,-]/g, ''));
});

Although this code works well in desktop browsers that I have tested (eg Chrome), on Mobile Safari it does not seem to work very well. On iOS 5, this does allow numeric characters and the minus sign to be entered, but it results in the cursor position acting strangely with the cursor often appearing before the entered character. On iOS 6, for some reason this does not allow the minus sign to be entered, only numeric characters.

Does anyone have a solution that does work correctly on Mobile Safari. I am looking for a pure Javascript solution here, or one that depends only on jQuery. Please don't answer with "use this or that library" or make comments about Javascript validation not being safe.

Community
  • 1
  • 1
BruceHill
  • 6,954
  • 8
  • 62
  • 114
  • type="number" will do. No extra checks are required. – Bikas Nov 06 '13 at 09:55
  • @Bikas Vaibhav That is what I thought. But type="number" only seems to affect the keyboard that is brought up on the *iPad* and does not seem to restrict input of non-numeric characters. Maybe this has to do with the fact that the page is being opened inside a *UIWebView* in a native application? – BruceHill Nov 06 '13 at 10:07

1 Answers1

0

Have a look at this...

var prevVal = '';
$(".numericValue").on("input", function (evt) {
    var self = $(this);
    if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
        prevVal = self.val()
    } else {
        self.val(prevVal);
    }
    if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
        evt.preventDefault();
    }
});
Agnibha
  • 613
  • 1
  • 11
  • 20