android - 在 Android 和 iOS 上查看网站时强制输入数字

Question

我需要一个保持 type="text" 的输入，但会在 Android 和 iOS 设备上打开数字键盘。

这是因为输入字段仍将包含 £ 和 , 等字符，这在 type="number" 中是不可能的> 或 type="tel".

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

这是我目前所拥有的:

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

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

Answer 1

编辑 (如果评论被清理)这个答案是在问题指定它是针对移动网络与移动应用程序之前写的。但是，这个答案将帮助那些在 Android 上使用 WebView 时寻找解决方案的人。

在 Android 上，用于显示页面的 WebView 可以覆盖 onCreateInputConnection。使用此方法，您可以更改 imeOptions，尽管您仍然受限于相同的数字类型。或者，您可以在 creating your own ime type 上工作.

一个例子:

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

但是，虽然我确信以上内容可以解决很多人的问题，但我认为您需要一些更复杂的东西。我的建议是，无论您使用哪种键盘类型，都可以使用 java 来验证和格式化您的输入，这需要几个步骤:

设置 javascript 界面

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

创建接口(interface)类

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

}

文本改变时调用验证

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