在Android和iOS上查看网站时强制input数字

我需要一个input,它仍然是type="text" ,但是会在Android和iOS设备上打开数字键盘。

这是因为input字段仍然具有诸如£字符,并且在type="number"type="tel"是不可能的。

我发现你可以使用pattern="\d*"在iOS上强制使用数字键盘,但是这对于Android没有任何作用。

这是我到目前为止:

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

Related of "在Android和iOS上查看网站时强制input数字"

编辑 (如果评论被清除)这个答案写在指定的问题之前,它是移动networking与移动应用程序。 但是,这个答案将有助于那些在Android上使用WebView时寻找解决scheme的人。

在Android上,用于显示页面的WebView可以覆盖onCreateInputConnection。 有了这个方法,你可以改变imeOptions,尽pipe你仍然限于相同的数字types。 或者,您可以创build自己的imetypes 。

一个例子:

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

不过,虽然我确信上述将解决很多人的问题,但我认为你需要一些更复杂的东西。 我的build议是,无论您使用哪种键盘types,您都使用java来validation和格式化input,这需要几个步骤:

设置一个JavaScript界面

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

创build接口类

 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$£,\.", ""); } } 

文本更改时调用validation

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

我用:

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

没有别的是必要的。

在iPhone上运行得非常好,特别是使用新的键盘types。 与默认和Swiftkey一起使用。

此外,这适用于所有Android设备。

更新:

给这个镜头:

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

我正在做类似的事情

看看我的例子: https : //jsfiddle.net/pj2uwmtL/6/

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