首页 > 解决方案 > 如何使用javascript将文本字段上的输入数字限制在1到9之间

问题描述

你好我正在尝试实现一个文本字段来收集 1 到 9 之间的 4 个字符的密码

我已经能够实现将输入限制为 4 个字符和数字

但我在限制在此文本字段中使用“0”时遇到问题

请帮忙

请参阅下面的代码,我尝试使用 min 和 max 属性进行限制

<input id="pin"  required name="pin"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "4" min="1" max="4"  placeholder="Pin Code">

标签: javascripthtml

解决方案


green当值的长度为 4 位时,请参阅边界值更改。if 语句使用正则表达式检查 1-9 之间的值和 4 位的长度。

var pinInputElement = document.querySelector('#pin');

pinInputElement.addEventListener('input', function(){

    if(/^[1-9]{4}$/.exec(this.value)) {
        this.classList.add('success');
    } else {
        this.classList.remove('success');
    }
});
#pin {
    width: 100px;
    border-width: 5px;
    border-color: orange;
}

#pin.success {
    border-color: green;
}
<input id="pin"  required name="pin" type="number"
    maxlength="4" min="1" max="4"  placeholder="Pin Code">


推荐阅读