CODEWITHSUNDEEP
androidioshtml
Michael Wilson
Michael Wilson

Reputation: 1579

Force numeric input when viewing website on Android & iOS

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

Upvotes: 30

Views: 5513

Answers (3)

Daniel Forbes
Daniel Forbes

Reputation: 624

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));
});

Upvotes: 2

Nick Cardoso
Nick Cardoso

Reputation: 21783

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

Upvotes: 6

iSkore
iSkore

Reputation: 7553

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,})?">

Upvotes: 1

Related Questions