I am having specific requirement to display Numeric symbol keyboard in both iPhone and Android mobile devices on focus of text input field due to most of the value entered by user in the field is numeric and symbols only. But the input field can accept alphabet characters also. To improve user experience, I need to display numeric symbol keyboard as default one on field focus. But With the HTML5 input tags, i can't able to achieve this in both iPhone but and android.
Input type = text--> Alpha numeric keyboard in both iOS and Android
Input type = tel and Input type = text with pattern as 0-9 --> Number dialer keypad in both iOS and Android
Input type = number --> Numeric symbol keyboard in iOS, Numeric Keypad in android.
As per W3 standard, input type=number will accept only numeric value along with decimal separator. even if we can able to enter other symbols, invalid number will be send in form submit. So, Input type= number is not proper option for this requirement.
I want to display second keyboard displayed in the image as default one on focus of input field. As I am targeting for both webpage and thick application, custom keyboard is not feasible solution. Is anyone having suggestion to achieve this???
You can't force a specific layout in Android. You can tell the keyboard the type, such as numeric (there's several type of numerics in Android, but html isn't that rich). The keyboard, which is a separate app, then decides what keyboard to show. Based on what that particular keyboard thinks is best it may show a 9-pad, a single number row, or even ignore your request. But there is no way to force a specific design, and no way to assure your keyboard even supports that design.
Also, for something like this a custom keyboard wouldn't be a good answer even if it was feasible. Users don't like the keyboard being changed, if you do it you better have a good reason. The reason "well I like this layout better for numerics" is not a good reason. In that case you need to drop that requirement.