Phone: numeric keyboard for text input

Question

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?

Metaxylem

There still isn't a great answer for postal codes. I re-asked this question specifically for international postal codes here: #25425681 – Elsy

I figured out a hackish way to do this ..sort of: https://mcmap.net/q/47584/-iphone-ios-presenting-html-5-keyboard-for-postal-codes – Mim

As of mid-2015, there is a better way of doing this: https://mcmap.net/q/46460/-phone-numeric-keyboard-for-text-input – Protagonist

Older, closely-related question: #3369046 – Rojas

Answer 1

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:

Try it in this code snippet:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

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/

Protagonist

The HTML5 type="number" spec says The following content attributes must not be specified and do not apply to the element: ... inputmode – Ocana

@Ocana Ahh, good catch. It appears the spec wants people to use <input type="text" inputmode="numeric"> and it wants mobile browsers to look at inputmode to determine if it shows a numpad or full keyboard. Since no browsers support inputmode, I'm unsure how its going to be implemented on desktop vs. mobile browsers. Ex: Will desktop browsers allow letter typing in <input type="text" inputmode="numeric">? If so, that's a problem. <input type="number"> prevents this, only allowing numbers. Perhaps we'll have to wait until browsers start implementing it and then we can update this answer. – Protagonist

Support for type="number" is decent, but it might display a spinner which does not make much sense for e.g. credit card numbers. – Ocana

how can I restrict to only two digits? maxlength does not work on number fields... – Zr

Having type="number" is a pain in the ass X(. If the input is invalid, you won't be able to get the value of the input in JS, you can't get the cursor position, etc. – Dunnite

When center aligning the text in the text field, due to the up/down arrow buttons that are there, the text is slightly on the left instead of being perfectly centered. Is there a way to fix this? – Backchat

@Hans add min="0" max="99" – Backchat

This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. – Dongdonga

this is a greate solution, but can i put the type="text" and the inputmode="numeric" on the same input field for credit card number as the following: <input type="text" inputmode="numeric"> or that will be not semantic or even may cause a problem? – Ahlgren

declaring <input type="number" inputmode="numeric"> worked just as well for me, allowing myself to do all the custom validation. This particular case was for a monetary value. Showing the number pad on a mobile whilst allowing for commas to be added in on the thousandth's – Imbibition

According to MDN, pattern is not a valid attribute for type="number" inputs developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#pattern – Playful

For those of you looking for more ways to show a number pad on the phone, try inputmode="decimal" – Knowling

Answer 2

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

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Unicellular

If you just want the numeric keyboard but don't want to validate (such as in Chrome), you can put the novalidate attribute on the form. <form ... novalidate> – Parthenogenesis

I have found that \d* does not work and [0-9] is required. Note that this will work with type='numeric'. This is suggested based on the linked documents reference for zip code. – Sapphism

This works as long as you need numeric values ONLY. Floating point numbers that require a '.' (or ',' for some regions) cannot be entered as they keyboard does not include these characters. – Loup

If I need to use . (dot), how can I use it? this pattern shows only [0-9] – Percaline

<input type="text" pattern="\d*"> doesnt work on android? I tested on ios and worked successfully but didnt work on android. how can I solve it – Whetstone

If you need access to the dot, use something similar to this <input type="number" step="0.01"> – Condemn

Stack Overflow code snippets don't show a "run" button when viewed on mobile. You need to view as desktop site. I didn't realise this when I edited the answer! – Sylviasylviculture

Doesn't work for android – Sibling

@Sibling Not sure if you still need this, but - try <input type="text" inputmode="decimal">. This works in Chrome for Android (12) and iOS (16). – Shayna

Answer 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.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Clinometer

The problem for me was not auto-formatting, but validation. Input of type number forces strict rules for the number in many browsers. If user adds space (or comma) to separate thousands you will not get ANY value from the input. Yes, even in JavaScript input.value will be empty. Input of type tel is not restricted to specific format so user can still input anything and validation is a separate process (for developer to handle). – Hildie

How can i use decimal numbers in this keyboard – Disturbance

This would be the perfect solution for me, as I just want to ensure the numeric keyboard shows up on mobile (and I have my own custom input validation), but my worry is about unintended effects of using type="tel". Are there any potential issues with using type="tel" on an input which is not going to store phone number data? (it will be mostly numeric data, but may have other characters) – Remy

Answer 4

<input type="text" inputmode="numeric">

With Inputmode you can give a hint to the browser.

Dwinnell

Documentation: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… – Nilotic

This should be the modern accepted answer. – Feodora

Answer 5

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".

Pentheus

Answer 6

as of 2020

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

css tricks did a really good article on it: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

Puck

Answer 7

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.

Gnarl

Adding a novalidate attribute on the containing form element should deal with the auto-validation problems. Be sure to do some validation on your own. – Tell

Answer 8

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" />

Saltus

Answer 9

There is an easy way to achieve this type of behaviour(like if we want to use text formatting in the input field but still want the numeric keyboard to be shown):

My Input:

<input inputMode="numeric" onChange={handleInputChange} />

Tip: if you want this type of behaviour(comma-separated numbers) then follow handleInputChange implementation (this is react based so mentioned states also)

Maillot

Please don't post code as image. Copy and paste the code withing the post itself. – Popup

Answer 10

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.

Baccarat

The issue I have is that type="number" is only supposed to be for floating point numbers - so no credit cards, zip codes, or a slew of other numbers only strings. I was hoping there was both a semantic way of encoding it as well as making the right keyboard display. The appropriate type, I think, would be input type="text" but then the wrong keyboard displays. If you could point me to some javascript to do it, that would solve both problems. – Metaxylem

type="number" is for float. type="text" is for string. What you really want is integer. I think float is closer to integer than string. What do you think? – Baccarat

One thing to beware of with type="number" is that Chrome at least will force the input to be a number - which will break credit card numbers entered with spaces (for example) – Lucy

@therefromhere It will also turn zip codes like 01920 to 1920. – Kimbrough

it will also mess up if the user has a different language set in their browser #5345595 – Sierra

Answer 11

In 2018:

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

is working for both Android and iOS.

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

Ambo

Answer 12

 <input type="text" inputmode="decimal">

it will give u text input using numeric key-pad

Diamagnetic

Answer 13

All of the posted answers trigger the number only keyboard, which is not what the OP was asking. The only way I've found to trigger the type='number' keyboard on a text input is to use CSS and JS.

The trick is to create a second number input, which you overlap on top of your text input using css.

<style type="text/css">
    /* hide number spinners on inputs */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance:textfield; /* Firefox */
    }
    .hidden-number {
        margin-top: -26px;
    }
</style>


<form method="post" action="submit.php">
    <input class="form-control" type="text" name="input_name">
    <input class="form-control hidden-number" type="number" id="input_name">
</form>

Using JavaScript, when your number input gains focus it will trigger the keyboard that you want. You will then have to remove the type='number' attribute, which would prevent you from entering anything other than numbers. Then transfer whatever content is in your text input to the number input. Lastly, when the number input loses focus, transfer its contents back to the text input and replace its type='number' attribute.

<script type="text/javascript">
    $(".hidden-number").on("focus", function(){
        $(this).removeAttr("type");
        var text_input = $("input[name="+this.id+"]");
        $(this).val(text_input.val());
        text_input.val("");
    });

    $(".hidden-number").on("focusout", function(){
        var text_input = $("input[name="+this.id+"]");
        text_input.val($(this).val());
        $(this).attr("type", "number");
    });
</script>

Profitable

Answer 14

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.

Dobsonfly

Answer 15

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.

Heterophyte

Answer 16

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

Latex