[关闭]
@TedZhou 2016-01-23T03:19:50.000000Z 字数 940 阅读 351

使用键盘事件(keypress)对输入框(input)做输入限制

技术 html javascript


需求

为避免用户输入非法数据,希望能对某些输入框的输入做限制。这里用价格输入框(只允许输入最多2位小数的非负数值)来做例子:

  1. <input type="text" id="price" name="price" placeholder="请输入价格(最多2位小数)" required>

键盘事件处理代码(javascript)

  1. //用了jQuery
  2. $(function(){
  3. //事件绑定
  4. $('#price').keypress(onPriceKeypress).keyup(onPriceKeyup);
  5. //按键处理
  6. function onPriceKeypress(e){
  7. var allowKeys = '0123456789+.';//只允许输入这些字符
  8. var keyCode = e.which;//键盘输入的字符码
  9. if (code<32 || (code>126 && code<160)){
  10. //在有些浏览器(如Firefox)下控制字符也会触发该事件
  11. return true;//允许输入控制字符,如退格、删除、tab等键
  12. }
  13. if (allowKeys.indexOf(String.fromCharCode(code))<0){//若是不允许的字符
  14. return false;//禁止输入
  15. }
  16. return true;
  17. }
  18. //起键处理
  19. function onPriceKeyup(e){
  20. var $ipt = $(this), val = $ipt.val();//取当前值
  21. if (!/^[+\d]?\d*\.?\d{0,2}$/.test(val)){//若当前值不是合法价格
  22. $ipt.val(/[+\d]?\d*\.?\d{0,2}/.exec(val));//去除不合法的内容
  23. }
  24. }
  25. }

注:
1. 只在input使用pattern属性(如:pattern="[+\d]?\d*\.?\d{0,2}")只能限制最后的结果,不能限制输入不当的字符。
2. 把input的type设为number可限制只能输入数字,但无法输入小数。
3. 在有些浏览器(如Firefox)下控制字符也会触发keypress事件,待textinput事件普及后改用该事件就不用做特殊处理了。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注