keydown event - key pressed on different systems

Question

I have a number input, which I want user to by unable to insert any non-digit characters. We have attempted this in a number of ways:

We started with removing all non-numeric characters on blur:

$(my_input).blur(function() {
  $(this).val($(this).val().replace(/[^\d]/, '')
}

The problem with the code above is that number field's val function returns empty string if the input is invalid. We definitively want a number field as our website is to be used on mobiles.

The option which I would prefer is to use keydown event:

$(my_input).keydown(function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    });

The above works almost as a charm. The problems are:

numeric keyboard not included in a range - this can be however easily fixed and is not a subject of this question.
For unknown to me reasons js on iOS is using different key codes, hence this is not working on huge part of mobile phones, iPads etc.. This is a deal breaker.

So the question - is there any way to determine which key was actually pressed with an keydown event. I have seen number of similar questions, none of them however covered those iOS differences. I've noticed that event has a 'key' property, however I am not sure how reliable this property is.

Hi Broi, have you tried a mask? https://plugins.jquery.com/tag/mask/ Not sure if itll work with the IOS differences but worth a shot.. easy to implement.. — JF it, Mar 14 '14 at 11:52

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

EDIT: I fell on this post which might be a neat way to solve your problem: JavaScript: Avoiding hardcoded keycodes

It would boil down to

var digitCodes = "0123456789".split('').map(function (x) { return x.charCodeAt(0); });

There might be a better way to do this but you could detect if the device is running iOS (c.f. Detect if device is iOS) and use the appropriate keycodes (c.f. http://notes.ericjiang.com/posts/333).

var digitCodes;
if (isiOS()) {
    digitCodes = keycodes.ios;
}
else {
    digitCodes = keycodes.default;
}

if (digitCodes.indexof(e.which) != -1) {
    ...
}

Something like that...

edited May 23 '17 at 11:49

Community

1
1

answered Mar 14 '14 at 12:13

Aegis

1,679
11
12

Hmmm. I like it, however how charCodeAt will handle dual keys (i.e. number on alphanumeric keyboard and numbers on numeric keyboard?) – BroiSatse Mar 14 '14 at 12:28
@BroiSatse Not sure about that (and I don't have a numeric keyboard on my hands to try it out :/) – Aegis Mar 14 '14 at 12:31
erm actually this might not be quite there. I was just reading http://stackoverflow.com/questions/14508733/javascript-string-charcodeatindex-and-keycodes and the issue seems to be a bit more complicated. Quoting: "jQuery has implemented a version of keyCode called event.which that it adds to the event object of a callback method. It normalizes these keyCodes so that they are consistent across all browsers and versions that jQuery supports.". Strange it's not normalized on iOS... – Aegis Mar 14 '14 at 12:34

Hamed Ali Khan · Answer 2 · 2014-03-14T12:38:29.780

0

You can try it this way

sample text box

<input type="text" name="sample" id="sample" onkeyup="positiveNumericOnly(this);" />

JS Code

function positiveNumericOnly(ele)
{
    tempVal = ele.value.replace(/[^\d]/g, "");
    if(tempVal != ele.value)
        ele.value = tempVal;
}

edited Mar 14 '14 at 12:38

answered Mar 14 '14 at 12:04

Hamed Ali Khan

1,086
3
21
28

Unfortunately value similarly to val() returns empty string if input is invalid for number field. (Test it in chrome) – BroiSatse Mar 14 '14 at 12:26
yes you are correct :), I didn't noticed your blur code earlier – Hamed Ali Khan Mar 14 '14 at 12:39

keydown event - key pressed on different systems

2 Answers2