数字键盘仅数字[重复]

Question

这个问题在这里已经有了答案：

如何在 Android 中的移动网站中强制使用数字键盘（7 个回答）

5年前关闭。

客户端需要在网站中有一个（美国）邮政编码字段，但是该字段只能接受数字，5 位数字，并且必须在 iOS 和 Android 中触发数字键盘。

此外必须使用外部数字键盘（在笔记本电脑上）...并且必须是文本字段。

似乎我尝试的每种方法（keyCode、模式等）在一个浏览器、设备或其他浏览器上都失败了……有什么建议吗？

注意事项：

1) 不能使用插件

2）不需要接受xxxxx-xxxx（只需要前5个）

编辑：这不在可以提供额外资源来触发数字键盘的 WebView 中。 此外，这需要保留一个文本字段（不能更改为电话或号码）。

此外，人们认为这是重复的问题没有标记答案，因此也没有解决方案。

具体来说，这需要在 Chrome、Firefox、IE、iOS 和 Android 上运行。

Answer 1

HTML5 具有输入类型编号，您可以使用它来限制仅输入数字。

<input type="number" name="your-id" />

Answer 2

您可以使用 HTML5 number输入。

<input type="number" min="1" max="99999">

如果你只能使用文本字段，你可以使用这个：

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="5" minlength="5"></input>

Answer 3

这是一个跨浏览器的键盘，哈哈https://jsfiddle.net/5f3pbg8b/9/

只需在 html 中创建您自己的键盘并在 javascript 中添加它的功能。

HTML

<body onload="emptyCode();">
<form method="get">
<table id="keypad" cellpadding="5" cellspacing="3">
    <tr>
        <td onclick="addCode('1');">1</td>
        <td onclick="addCode('2');">2</td>
        <td onclick="addCode('3');">3</td>
    </tr>
    <tr>
        <td onclick="addCode('4');">4</td>
        <td onclick="addCode('5');">5</td>
        <td onclick="addCode('6');">6</td>
    </tr>
    <tr>
        <td onclick="addCode('7');">7</td>
        <td onclick="addCode('8');">8</td>
        <td onclick="addCode('9');">9</td>
    </tr>
    <tr>
        <td></td>
        <td onclick="addCode('0');">0</td>
        <td></td>
    </tr>
</table>
<input type="text" name="code" value="" maxlength="4" class="display" readonly="readonly" onfocus="showKeys()"/>
<p id="message">There is your 5 numbers!</p>
</form>
</body> 

CSS

body {
    text-align:center; 
}   
#keypad {margin:auto; margin-top:20px; visibility: hidden}

#keypad tr td {
    vertical-align:middle; 
    text-align:center; 
    border:1px solid #000000; 
    font-size:18px; 
    font-weight:bold; 
    width:40px; 
    height:30px; 
    cursor:pointer; 
    background-color:#666666; 
    color:#CCCCCC;}
#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

.display {
    width:130px; 
    margin:10px auto auto auto; 
}
#message {
    text-align:center; 
    color:#009900; 
    font-size:14px; 
    font-weight:bold; 
    display:none;
}

Javascript

function showKeys(){
    document.getElementById("keypad").style.visibility = "visible";
}
function addCode(key){
    var code = document.forms[0].code;
    if(code.value.length < 5){
        code.value = code.value + key;
    }
    if(code.value.length == 5){
        document.getElementById("message").style.display = "block";
        setTimeout(submitForm,1000);    
    }
}

function emptyCode(){
    document.forms[0].code.value = "";
}