input[type=“number“]去掉右侧箭头并限制输入长度

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 位的数字。

你可能感兴趣的:(css)