Phone: numeric keyboard for text input

问题:

Is there a way to force the number keyboard to come up on the phone for an <input type=\"text\">? I just realized that <input type=\"number\"> in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.

I want to emulate the numeric-keyboard functionality of <input type=\"number\">, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate input type that does that?

回答1:

You can do <input type=\"text\" pattern=\"\\d*\">. This will cause the numeric keyboard to appear.

See here for more detail: Text, Web, and Editing Programming Guide for iOS

回答2:

As of mid-2015, I believe this is the best solution:

<input type=\"number\" pattern=\"[0-9]*\" inputmode=\"numeric\">

This will give you the numeric keypad on both Android and iOS:

It also gives you the expected desktop behavior with the up/down arrow buttons and keyboard friendly up/down arrow key incrementing:

By combining both type=\"number\" and pattern=\"[0-9]*, we get a solution that works everywhere. And, its forward compatible with the future HTML 5.1 proposed inputmode attribute.

Note: Using a pattern will trigger the browser\'s native form validation. You can disable this using the novalidate attribute, or you can customize the error message for a failed validation using the title attribute.

---

If you need to be able to enter leading zeros, commas, or letters - for example, international postal codes - check out this slight variant.

---

Credits and further reading:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

回答3:

I have found that, at least for \"passcode\"-like fields, doing something like <input type=\"tel\" /> ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting. For example, in a mobile application I developed for Hilton recently, I ended up going with this:

... and my client was very impressed.

回答4:

Using the type=\"email\" or type=\"url\" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type=\"tel\".

回答5:

There is a danger with using the <input type=\"text\" pattern=\"\\d*\"> to bring up the numeric keyboard. On firefox and chrome, the regular expression contained within the pattern causes the browser to validate the input to that expression. errors will occur if it doesn\'t match the pattern or is left blank. Be aware of unintended actions in other browsers.

回答6:

I think type=\"number\" is the best for semantic web page. If you just want to change the keyboard, you can use type=\"number\" or type=\"tel\". In both cases, iPhone doesn\'t restrict user input. User can still type in (or paste in) any characters he/she wants. The only change is the keyboard shown to the user. If you want any restriction beyond this, you need to use JavaScript.

回答7:

For me the best solution was:

For integer numbers, which brings up the 0-9 pad on android and iphone

<label for=\"ting\">
<input id=\"ting\" name=\"ting\" type=\"number\" pattern=\"[\\d]*\" />

You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

And add novalidate=\'novalidate\' to your form element, if your doing custom validation

Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add \'.\' to android

<label for=\"ting\">
<input id=\"ting\" name=\"ting\" type=\"number\" pattern=\"[\\d\\.]*\" step=\"0.01\" />

回答8:

In 2018:

<input type=\"number\" pattern=\"\\d*\">

is working for both Android and iOS.

I tested on Android (^4.2) and iOS (11.3)

回答9:

You can try like this:

<input type=\"number\" name=\"input\">
<input type=\"submit\" value=\"Next\" formnovalidate=\"formnovalidate\">

But be careful: If your input contains something other than a number, it will not be transmitted to the server.

回答10:

I couldn\'t find a type that worked best for me in all situations: I needed to default to numeric entry (entry of \"7.5\" for example) but also at certain times allow text (\"pass\" for example). Users wanted a numeric keypad (entry of 7.5 for example) but occasional text entry was required (\"pass\" for example).

Rather what I did was to add a checkbox to the form and allow the user to toggle my input (id=\"inputSresult\") between type=\"number\" and type=\"text\".

<input type=\"number\" id=\"result\"... >
<label><input id=\"cbAllowTextResults\" type=\"checkbox\" ...>Allow entry of text results.</label>

Then I wired a click handler to the checkbox that toggles the type between text and number based on whether the checkbox above is checked:

$(document).ready(function () {
    var cb = document.getElementById(\'cbAllowTextResults\');
    cb.onclick = function (event) {
        if ($(\"#cbAllowTextResults\").is(\":checked\"))
            $(\"#result\").attr(\"type\", \"text\");
        else
            $(\"#result\").attr(\"type\", \"number\");

    }
});

This worked out well for us.

回答11:

try this:

$(document).ready(function() {
    $(document).find(\'input[type=number]\').attr(\'type\', \'tel\');
});

refer: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask