CODEWITHSUNDEEP
androidhtmlcordovainputkeyboard
scor4er
scor4er

Reputation: 1589

HTML Input: force numeric keyboard by default but allow letters

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.

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?

enter image description here

Upvotes: 9

Views: 11834

Answers (3)

brassmookie
brassmookie

Reputation: 417

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>

Upvotes: 1

Leandro Barbosa
Leandro Barbosa

Reputation: 192

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.

Upvotes: 10

Michele La Ferla
Michele La Ferla

Reputation: 6884

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.

Upvotes: -3

Related Questions