Force numeric input when viewing website on Android & iOS

Question

I need to have an input which will remain type="text", but will open the numeric keyboard on both Android and iOS devices.

This is because the input field will still have characters such as £ and , which will not be possible within a type="number" or type="tel".

I've discovered that you can force the numeric keyboard on iOS using pattern="\d*", but this does nothing for Android.

Here is what I have so far:

<input type="text" inputmode="numeric" pattern="\d*" value="£2,000,000" /> 

http://jsbin.com/nelodixeza/edit?html,output

Answer 1

Edit (In case the comments are cleaned up) this answer was written before the question specified it was for mobile web vs mobile apps. However, this answer will help those looking for a solution when using a WebView on Android.

On Android the WebView used for displaying the page can override onCreateInputConnection. With this method you can alter the imeOptions, although you are still limited to the same numeric types. Alternatively you could work on creating your own ime type.

An example:

@Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) {     InputConnection inputConnection = super.onCreateInputConnection(outAttrs);     outAttrs.inputType = outAttrs.inputType | InputType.TYPE_NUMBER_VARIATION_NORMAL;     return inputConnection; } 

However, while I'm sure the above will solve many peoples problems, I think you need something a little more complex. My suggestion is that whatever keyboard type you use, you use java to validate and format your input, which takes a couple of steps:

Setup a javascript interface

webView.addJavascriptInterface(new ValidationInterface(), "appValidator"); 

Create the interface class

public class ValidationInterface {      //This method would only tell you if a char is invalid     @JavascriptInterface     public boolean isValid(String text){         int len = text.length();         //replace everything thats NOT 0-9, $, £, comma or dot         text = text.replaceAll("[^0-9$£,\.", "");         //Its valid if the length didnt change (because nothing needs removing)         return text.length() == len;     }      //This method would strip out invalid text as you go     @JavascriptInterface     public String getValid(String text){         //replace everything thats NOT 0-9, $, £, comma or dot         return text.replaceAll("[^0-9$£,\.", "");     }  } 

Call the validation when the text changes

function validate(value) {     //ive not written js in a long time, you'll definitely need to tweak this     //EITHER do this     var valid = appValidator.isValid(value);     if (valid) {         //DO SOEMTHING     } ...      //OR try this     var validText = appValidator.getValid(value);     $('#theField').value(validText); //really not sure this is valid }  //also just be aware you might need to use keyUp or somethign other than change //if you are replacing the text as you type, using getValid method <input id="theField" type="text" onChange="validate(this.value)" ... />