HTML 输入：默认强制使用数字键盘，但允许使用字母

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?

Answer 1

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.

Answer 2

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>

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