1、用 CSS 去掉右侧箭头
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
-webkit-appearance: none!important;
}
input.no-spin[type="number"] { -moz-appearance: textfield; }
input.no-spin {
background: transparent;
color: #aaa;
border: 1px solid #aaa;
}
2、限制输入长度
当 input 的 type 为 text 的时候,使用 maxlength 可以有效限制输入长度。
当 type 为 number 的时候,设置 maxlength 限制输入长度就会失效,长度可以无限输入。
解决方法:
上述即为使用 oninput 方法监听用户输入行为,当值得长度大于 4 的时候,用 slice 方法截取前 4 位的数字。
<input type="number" oninput="value = (value.length > 4 ? value.slice(0, 4) : value)">