javascript - 如何使用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">
解决方案
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">
推荐阅读
- java - 安卓 | Junit 4 测试崩溃
- amazon-web-services - 使用 AWS 创建匹配系统
- spring - hystrix仪表板不加载metrix
- java - Maven 不会下载依赖项
- linux - 在 ssh 命令中执行 ssh
- c - CM_Get_DevNode_Property,DEVPKEY_Device_DeviceDesc 在哪里?
- knex.js - 有条件地在 knex 中插入记录
- flutter - Flutter 依赖冲突
- verilog - Verilog Timing Simulation: +notimingcheck versus +no_notifier
- c# - Why is case-insensitive HashSet
performance so bad