如何在移动浏览器中显示仅数字键盘以及最大长度和不允许键盘特殊字符？答案

【问题标题】：How to show numeric only keypad in mobile browser along with maxlength & not allow keypad special characters?如何在移动浏览器中显示仅数字键盘以及最大长度和不允许键盘特殊字符？
【发布时间】：2018-03-01 03:11:52
【问题描述】：

我有几个字段需要数字小键盘才能显示在移动浏览器中。

<input type="tel"> 显示键盘，但随之而来的是特殊字符，如 () p w + 等。

<input type="number"> 显示键盘，但不支持最大长度。其中一个领域是年龄。所以它的宽度很小。

由于不存在 maxlength 支持：如果用户输入太多字符，将进行验证，但由于输入大小较小，擦除大数字变得乏味。

【问题讨论】：

答案好吗？你在寻找我错过的东西吗？
我的错。我没有提到不要使用浏览器验证。我们需要在跨浏览器的字段下方一致地显示一个小错误消息。（浏览器验证 UI 并不一致。）顺便说一句，我找到了解决方案。

标签： html forms validation input

【解决方案1】：

您可以使用pattern 属性来代替max-length。因此，表单将立即验证模式并在不满意时标记错误。例如，

<input type="tel" pattern="^\d{1,4}$">

这将只接受长度小于 4 的数字（即 1 到 4 之间）。如果长度超过或用户输入了无效字符，如#，它会进行标记。

我已经在 Firefox 上对其进行了测试，并且可以正常工作。

【讨论】：

【解决方案2】：

我终于使用<input type="tel"> 得到了解决方案。电话键盘中的特殊字符返回 229 作为键码。并将值解析为整数返回为 NaN。从而有助于验证输入的字符。

Android 中 Chrome 的一个特殊问题是您无法获取关键事件。因此，您将能够输入特殊字符，但稍后会进行验证。在其他浏览器中，您根本无法输入特殊字符。

【讨论】：

【解决方案3】：

**只需定义文本字段类型编号并设置最大长度 3 **

<EditText
            android:id="@+id/spdtxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="number"
            android:maxLength="3"
            android:textAlignment="center"
            tools:text="80" />

【讨论】：

【解决方案4】：

您可以使用带有 max 和 min 属性的输入 type='number'。

<input type="number" id="age" min="0" max="999" />

或者，如果您更喜欢使用 Javascript，可以使用 KeyPress。

<input type="number" id="age" min="0" max="999" onkeypress="validateLength()"/>

<!-- language: lang-js -->

const limitAgeSize = 3;
const $inputAge = document.getElementById("age");
function validateLength() {
    if ($inputAge.value.length >= limitAgeSize) {
        $inputAge.value = $inputAge.value.slice(0, -1);
    }
}

问题是如果用户复制例如“99999”并按Ctrl + V，函数validateLength() 只会删除最后一个字符。要删除更多，你可以写一个while循环。

【讨论】：

【解决方案5】：

您可以使用以下方法

方法一：

<input type="text" pattern="[0-9]+" inputmode="numeric" />

方法2（适合电话号码）：

<input type="tel" />

【讨论】：