Question

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

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

<input type="number">显示键盘，但没有maxlength支持。其中一个领域是年龄。所以它的宽度非常小。

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

Answer 1

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

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

这将只接受4的长度（即1到4之间）。它标记长度是否超过或用户输入无效字符#。

我已经在Firefox及其工作方面对它进行了测试。

Answer 2

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

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

Answer 3

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

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

或者，如果您更喜欢在事件KeyPress中使用Javascript。

<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);
    }
}

问题是如果用户复制例如＆＃34; 99999＆＃34;并按Ctrl + V，功能validateLength()仅删除最后一个字符。要删除更多，可以编写一个while循环。

Answer 4

**只需定义文本字段类型编号并设置max lengt 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" />

Answer 5

您可以使用以下方法

方法一：

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

方法 2（适用于电话号码）：

<input type="tel" />

如何在移动浏览器中显示数字键盘以及maxlength＆amp;不允许键盘特殊字符？

5 个答案: