在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

我用：

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

沒有別的是必要的。

在iPhone上運行得非常好，特別是使用新的鍵盤類型。與默認和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,})?"> 

Answer 2

我從事類似的東西

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

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

Answer 3

編輯（如果評論被清除）這個答案寫在指定的問題之前，它是移動網絡與移動應用程序。但是，這個答案將有助於那些在Android上使用WebView時尋找解決方案的人。

在Android上，用於顯示頁面的WebView可以覆蓋onCreateInputConnection。使用這種方法，您可以更改ime選項，儘管您仍然限於相同的數字類型。或者，您可以在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"); 

創建接口類

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