Home / Questions / 188643
Accepted
Popularfan
Asked: 2020-08-15 00:27:21 +0800 CST 2020-08-15 00:27:21 +0800 CST

允许在移动设备的 javascript 文本框中仅输入数字

  • 772

我在 JavaScript 中有一个表单填写功能，它允许我在文本框中输入数字。

问题是它只适用于计算机，而不适用于移动设备。

function validarNumero(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true; 
    patron =/[0-9]/;
    te = String.fromCharCode(tecla); 
    return patron.test(te); 
 }

在 HTML 代码部分

<input type="text" id="txtNumero" maxlength="10" onkeypress="return validarNumero(event)">
javascript

3 Answers

  1. Best Answer

    如果您不能使用HTML5 和 CSS3，那么最便携的方法可能是捕获事件keyup并change从表单字段中删除数字，如下所示：

    function limpiarNumero(obj) {
  /* El evento "change" sólo saltará si son diferentes */
  obj.value = obj.value.replace(/\D/g, '');
}
    <input type="text" id="txtNumero"
  maxlength="10"
  onkeyup="limpiarNumero(this)"
  onchange="limpiarNumero(this)"
/>

    原因是您必须过滤以保持与所有内容（移动设备、复制/粘贴、悬停、选择部分文本等）的兼容性的击键的复杂性。

    您可以在文档中找到有关键盘代码的更多信息。

    我个人会保留一个可以利用 HTML5 功能（如果存在）的混合版本。

    我将HTML5 + CSS3版本保留在更改历史记录中。

    • 4

  2. number只要您不需要支持比caniuse表中列出的设备更早的设备，您就应该使用输入类型。

    <input type="number" />

    更新

    由于你不能使用 HTML5，你可以试试这个功能：

    function validarNumero(e){
    var charCode = (e.which) ? e.which : e.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }
    return true;
}
    • 2

  3. 我提出2个解决方案。

    利用：

    <input type="number">

    有了这个，你可以让数字键盘出现在手机上。这有利有弊。

    一方面，您保存了验证，并且您拥有更受保护的数据条目。另一方面，例如，您不能在“0898”前面加上零，否则会消除 0。如果它们是邮政编码、电话号码等，则会出现问题......

    另一种解决方案是使用：

    <input pattern="[0-9]{7,15}">

    这是 HTML5 验证，工作原理与required、minlength、maxlength等相同。

    上面的示例验证它是一个 7 到 15 位数字的字符串，其中只能有 0-9 之间的字符（它对我来说非常适合第一次电话验证）

    这只是一个示例，您可以使用任何适合您的正则表达式。

    我不知道如何改进您的 javascript 代码，但您可以将此选项保留用于桌面，并将这些选项之一用于移动设备。

    • 1