Number Only with Numeric Keyboard

Question

A client needs to have a (US) Zip Code field in a website, however this field can only accept numbers, 5 digits, and must trigger the numeric keypad in both iOS and Android.

Additionally must work with external numberpads (on laptops)...and must be a text field.

It seems like every approach I try (keyCode, pattern, etc) fails on one browser or device or another...any recommendations?

Considerations:

1) Cannot use plugins

2) Do not need to accept xxxxx-xxxx (just first 5)

EDIT: This is not in a WebView which could provide additional resources to triggering the numeric keypad. In addition this needs to remain a text field (cannot change to tel or number).

Additionally the question that people believe this to be a duplicate of does not have an answer marked, so, it does not have a resolution either.

To be specific, this needs to work across, Chrome, Firefox, IE, iOS, and Android.

Welcome to SO. Please visit the [help] and take the [tour] to see what and how to ask. HINT: post code and efforts — mplungjan, May 26 '16 at 19:52
@mplungjan I've performed a search, and in one way or another it seems all the recommended approaches fail in some browser/device or another. — Shawn Christopher, May 26 '16 at 19:55
@AdamBuchananSmith it's not because it needs to stay a text field and there are other constraints. But if you have other recommendations I'd appreciate them. — Shawn Christopher, May 26 '16 at 20:03
So how about you tell us what you have tried, give us some examples and what your constraints are? SO is not a code writing service. — Adam Buchanan Smith, May 26 '16 at 20:06
How about this then? `` as seen here http://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input — Adam Buchanan Smith, May 26 '16 at 20:08
So, things I've tried. 1) Pattern - This works, however seems only on iOS (not on Android) - Fail 2) jQuery keypress - This works across all browsers (Whereas keyup was not working in Firefox), however keypress isn't recognized by Android (or iOS). 3) jQuery keydown - This works across all browsers (including Android/iOS, however does not provide numeric keypad in Android). ...I'm sure there's something super simple I'm missing, and also not able to find. — Shawn Christopher, May 26 '16 at 20:24

score 0 · Answer 1 · answered May 26 '16 at 19:52

0

HTML5 has input type number that you can use to restrict input to numbers only.

<input type="number" name="your-id" />

answered May 26 '16 at 19:52

DottedT

183
6

Thanks, but I specified it must be a text field... – Shawn Christopher May 26 '16 at 19:54
Ok, then just add type="text" to it. If you need it to be a then your only option is to use JavaScript something like [this](http://stackoverflow.com/questions/22571923/how-to-limit-the-textarea-to-only-hold-numbers) – DottedT May 26 '16 at 20:06
This doesn't work on mobile with pattern="/d*" not working on Android. – Shawn Christopher May 26 '16 at 20:33
try adding step="0.01" to the textfiled or input. This should bring up the numeric keyboard for both android and ios. Thus no typey typey letters. – DottedT May 26 '16 at 20:56
Or use pattern="[0-9]*" which I believe is almost universal. – DottedT May 26 '16 at 21:11

score 0 · Answer 2 · answered May 26 '16 at 19:55

0

You could use HTML5 number input.

<input type="number" min="1" max="99999">

If you can only use text field you could use this :

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="5" minlength="5"></input>

answered May 26 '16 at 19:55

Aaron Ullal

4,855
8
35
63

I've tried this and it seems to disable the pattern="/d" that I need for device numeric input. – Shawn Christopher May 26 '16 at 20:01
Device numeric input?!? – IMTheNachoMan May 26 '16 at 20:52

Adam Buchanan Smith · Answer 3 · 2016-05-26T21:24:52.103

Here is a cross browser keypad for you lol https://jsfiddle.net/5f3pbg8b/9/

Just create your own keypad in html and add the functions of it in javascript.

HTML

<body onload="emptyCode();">
<form method="get">
<table id="keypad" cellpadding="5" cellspacing="3">
    <tr>
        <td onclick="addCode('1');">1</td>
        <td onclick="addCode('2');">2</td>
        <td onclick="addCode('3');">3</td>
    </tr>
    <tr>
        <td onclick="addCode('4');">4</td>
        <td onclick="addCode('5');">5</td>
        <td onclick="addCode('6');">6</td>
    </tr>
    <tr>
        <td onclick="addCode('7');">7</td>
        <td onclick="addCode('8');">8</td>
        <td onclick="addCode('9');">9</td>
    </tr>
    <tr>
        <td></td>
        <td onclick="addCode('0');">0</td>
        <td></td>
    </tr>
</table>
<input type="text" name="code" value="" maxlength="4" class="display" readonly="readonly" onfocus="showKeys()"/>
<p id="message">There is your 5 numbers!</p>
</form>
</body>

CSS

body {
    text-align:center; 
}   
#keypad {margin:auto; margin-top:20px; visibility: hidden}

#keypad tr td {
    vertical-align:middle; 
    text-align:center; 
    border:1px solid #000000; 
    font-size:18px; 
    font-weight:bold; 
    width:40px; 
    height:30px; 
    cursor:pointer; 
    background-color:#666666; 
    color:#CCCCCC;}
#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

.display {
    width:130px; 
    margin:10px auto auto auto; 
}
#message {
    text-align:center; 
    color:#009900; 
    font-size:14px; 
    font-weight:bold; 
    display:none;
}

Javascript

function showKeys(){
    document.getElementById("keypad").style.visibility = "visible";
}
function addCode(key){
    var code = document.forms[0].code;
    if(code.value.length < 5){
        code.value = code.value + key;
    }
    if(code.value.length == 5){
        document.getElementById("message").style.display = "block";
        setTimeout(submitForm,1000);    
    }
}

function emptyCode(){
    document.forms[0].code.value = "";
}

Number Only with Numeric Keyboard

3 Answers3