Reputation: 1579
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
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
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
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