Force numeric input when viewing website on Android & iOS

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)" ... />

I was working on something similar

have a look at my example : https://jsfiddle.net/pj2uwmtL/6/

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

I use:

<input type="text" pattern="\d*" />

Nothing else is necessary.

Works very well on iPhone particularly with the new keyboard types. Works with the default and Swiftkey.

In addition this works on all Android devices.

Update:

Give this a shot:

<input type="text" step="0.01" pattern="[0-9]*">

<input type="text" min="0" max="100" pattern="[0-9]*">

Or

<input type="text" pattern="\-?\d+(\.\d{0,})?">