在input中只能输入数字和限制长度和大小

在input中只能输入数字和限制长度和大小限制

1、<input type="number"  onkeyup = "value=value.replace(/[^\d]/g,'')" />

使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母

 

2、<input type="number"  onchange = "value=value.replace(/[^\d]/g,'')" />

使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应

 

3、<input type="number" oninput = "value=value.replace(/[^\d]/g,'')" />

使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。

 

4、input只能输入数字并限制长度
限制长度（字符数）

<input type="number" οninput="if(value.length>11)value=value.slice(0,11)" />

 

5、限制大小（最大值、最小值）
//限制最大值30  、限制最小值0

<input type="number" οninput="if(value>30)value=30" />

<input type="number" οninput="if(value<0)value=0" />

 

6、联合限制（限制长度和大小）

//长度2 最大值30 最小值0

<input type="number" οninput="if(value>30)value=30;if(value.length>2)value=value.slice(0,2);if(value<0)value=0" />