[RESOLVED]Best way to show numeric keypad on touch devices & work as normal in desktops

I have a MVC4 web application which has a number of text fields accepting numbers & some with decimals as well.

Currently i have the below HTML markup for them: internally they are HTML TextboxFor helper methods.

<input id="Day" maxlength="2" name="Day" placeholder="DD" type="text">
<input id="Month" maxlength="2" name="Day" placeholder="DD" type="text">
<input id="Year" maxlength="4" name="Day" placeholder="DD" type="text">

<input id="Salary" name="Salary" type="text">

<input id="Percentage" name="Percentage" type="text">

Using DataAnnotations, there are some range & regular expressions validations on the above fields.

Now currently on touch devices, since type = text so normal (alphanumeric) keypad comes up. But need to show numeric keypad for all the number fields.

Searched a lot for a solution, few suggestions were :

- Change to type=number, but maxlength doesn’t work on Chrome/Firefox.
- type=number, has issues in iOS, as it adds a thousand seperator to numbers.
- With type=number, the field contains a spinner which increases the number entered by one digit each time. – This can be removed using CSS.
- type=number, instead of maxlength, we can use min.max, but it adds some default validation messages.
- Change to type=tel, maxlength works as usual in all browsers, but not Android.

Not sure which would be the best solution, any more suggestions.

Hi DreamBig,

Since your texboxes just accept type as number,i still recommend to set type as number in your project.

For maxlength doesn’t work on Chrome/Firefox,i suggest that you can javscript validation on the textbox

For it has issue in ios which we can not test ,I suggest that you can google for solution to solve it.

Best Regards,

Kevin Shen.

<input type="number" />
input type="tel" 

opens up numeric keypad on all touch devices & maxlength also works fine with it.

So going with it.

Leave a Reply