将输入数字中的用户输入限制为4位数

Question

如何阻止(使用Angular)用户输入一个简单数字中的4个以上的数字,如下所示:

<input type="number">

我使用ng-maxlength和max属性,但w3.org规范和官方网站Angular指定的那些属性不会阻止用户添加更多数字.

我想要的是输入停止在4位数,就像以某种方式添加一个掩码或东西.

Answer 1

以下是使用JavaScript执行此操作的方法:

HTML

<input type="number" oninput="checkNumberFieldLength(this);">

JavaScript的

function checkNumberFieldLength(elem){
    if (elem.value.length > 4) {
        elem.value = elem.value.slice(0,4); 
    }
}

我还建议使用输入Number元素的min和maxHTML属性,如果它适用于您的情况.

的jsfiddle

W3c:输入数字

Answer 2

好吧，正如上面有人所说的 maxlength 不适用于数字类型的输入，所以你可以这样做：

<input type="text" pattern="\d*" maxlength="4">

当然，如果不需要输入 type="number" 就可以了