I have a text field on my HTML5 web page as follows -
<input type="text" pattern="[0-9]*" inputmode="numeric">
Please note that I cannot change the type attribute in my markup.
When the user touches the text field on a mobile device I want that a numeric keypad should show instead of an alphanumeric one.
I achieved this for iOS by using the pattern attribute. Is there a way to achieve this for android?
Thanks in advance!
I tested this on iOS and Android and it worked!
<input type="text" inputmode="numeric">
On both devices the numeric keypad was shown, although the type of the input field is "text".
As I understand it you are building a HTML form and you want mobile browsers to display a numeric keyboard instead of the full one? The correct HTML syntax (check https://www.w3schools.com/html/html_form_input_types.asp) is:
Input Type Number The defines a numeric input field. You can also set restrictions on what numbers are accepted. The following example displays a numeric input field, where you can enter a value from 1 to 5:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Now if it were an Android form, you would put: android:inputType="numberDecimal" for example.
You said that you couldn't / didn't want to use the "number" instead of "text" attribute, but I really think that you should use attributes that are called for. Perhaps you could modify your code to accommodate the input fields with the "number" attribute or use jQuery to replace "text" with "number" on document ready.
$("#my_input_field").attr("type", "number");