HTML Input: force numeric keyboard by default but allow letters

Question

I have an HTML input. The input is on the web page which is opened in Chrome on an Android phone.

I want an option to let the user to see a numeric keyboard when he starts entering the value. But at the same moment, I want him to have a possibility to enter alphanumeric characters.

I cannot use type="number" because it doesn't allow entering letters.
I cannot use type="text" because it opens alpha keyboard by default and a user have to switch to numeric keyboard.

So the option I'm trying to find is when the standard alpha-numeric keyboard got opened but the digits input is already selected (Like when you press ?123 on the standard keyboard).

I have tried to use type="tel" but I don't understand how to switch to letters from numbers.

I'm using Cordova, so if there's no option to do this using HTML I could use native plugins if you suggest me any of them.

I use cordova so if there's no HTML way to do things I'm ready to integrate any sort of plugin, if you could suggest me anyone.

TL;DR: This is what I want to see as a default keyboard layout. Is it possible?

So you basically just want the default keyboard open but pre-swapped to the numbers and symbols page? — DanielLaneDC
– DanielLaneDC, Commented Apr 9, 2018 at 6:56
If you open the keyboard programmatically, you might be able to send the key event that swaps the keyboards, so that it "starts" on the numberic part, but it certainly does not appear to be supported by the InputMethodManager. — DanielLaneDC
– DanielLaneDC, Commented Apr 9, 2018 at 7:12
@DanielLaneDC you're correct. I wasn't able to find how to send anything programmatically to the keyboard opened via javascript. Probably native Android coding needed here. — scor4er
– scor4er, Commented Apr 9, 2018 at 13:54

Leandro Barbosa · Accepted Answer · 2018-10-29 20:41:12Z

10

You probably want to take a look at this: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">

The inputmode will work on the latest Android browsers, and the pattern is a hack for iOS. Pay special attention to the article where they talk about iOS not allowing the user to change keyboards.

Hope it helps.

answered Oct 29, 2018 at 20:41

Leandro Barbosa

1924 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

scor4er Over a year ago

It doesn't allow me to switch to the letters keyboard, it brings up a regular number keyboard, that's why I haven't accepted this answer.

Zafer Faheem Over a year ago

Doesn't work on iPhone.

brassmookie · Accepted Answer · 2022-05-23 11:48:42Z

Full solution to your problem using JavaScript.

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>

Michele La Ferla · Accepted Answer · 2018-04-05 10:24:35Z

-3

You cannot do this as the keyboard layout provided to the user is based on the input type of your input. It would be a bad UI principle to show the user a numeric keypad, when he can in reality enter alphanumeric characters. The tel input type won't let you change the keyboard to a numeric one, since it is specifically designed to accept only phone numbers.

So if you want to let the user enter alphanumeric characters in your input, you should not set the keyboard to be numeric. See the example below:

<input type="text" name="valText"/>

If on the other hand you want to allow the user to only enter numeric characters, then you should set the input type to number as below:

<input type="number" name="valNumber"/>

A workaround to this would be to create multiple inputs and set their type to whatever you want the user to enter in that particular field. You can then concatenate them to a single value to save them in that way. However you will need to save them as a concatenated String which contains both characters and numbers.

You can also take a look at the link here to check the different input types you can use in case you find one of them more of use to you. What you must remember however is that the input type will define the keypad layout. You may also take a look at this for a better understanding.

edited Apr 5, 2018 at 10:24

answered Apr 5, 2018 at 10:08

Michele La Ferla

6,88211 gold badges57 silver badges84 bronze badges

3 Comments

scor4er Over a year ago

It looks like you rephrased my question in your answer. I understand that the keyboard layout is based on the input type. This is the nature of the problem. I know that 90% of times user will input only numbers, but the characters are still can be entered rarely. So the goal is to avoid extra tap.

Michele La Ferla Over a year ago

I understand your concern there but it is the norm for a user to be presented with an alphanumeric keypad if you want him to enter letters and numbers. With your question, you are going against that norm in user experience. If I were you, I would create multiple input types and concatenate them together. That is if you want to insist on showing the numeric keyboard by default.

scor4er Over a year ago

Agree, seems like the best option is to use two inputs. Thank you for your time.

Collectives™ on Stack Overflow

HTML Input: force numeric keyboard by default but allow letters

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related