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???