input只能输入数字并限制长度

随笔记录

情景:要求只能输入数字,且限制长度,在谷歌浏览器移除input[number]的上下箭头样式

<input type="text" maxlength="5" /> 效果ok，当 <input type="number" maxlength="5" />时maxlength失效，长度可以无限输入

解决参考代码:

<style>

/*在chrome下移除input[number]的上下箭头*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type="number"]{-moz-appearance:textfield;}
<style>

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)">