利用JavaScript实现只接收整数的输入框(input)方法
by 毛三胖 on 2018年03月05日
阅:331赞:5

代码

age.onkeydown = function(event) {
    console.log(event.key+":"+event.which +":"+ event.keyCode +":"+ event.charCode);
    var c = event.keyCode;
    if ( c == 8 || c == 46 || c == 37 || c==39) {
    }
    else {
        if (c < 48 || (c > 57 && c < 96) || c >105 ) {
            event.preventDefault();
        } else if((c == 48 || c == 96) && (!this.value)) {
            event.preventDefault();
        }
    }
};

分析及演示

监听键盘的keydown事件,获得输入的键值,如果输入的键值为数字,Backspace,Delete,LeftArraw,RightArrow则接受。否则不接受输入值,如果首字母输入0,也不接受输入值。

键值表

  • Backspace 键值 8,Delete 键值46
  • 数字0 键值 48,数字 9 键值 57
  • 数字键盘,0 键值 96,9键值105
  • LeftArrow 键值 37 ,RightArrow 键值 39
  • 英文小数点(.) 键值 190
  • 负号(-) 键值 173

延伸

示例中只加入了正整数的判定。如果想加入负数及小数的判定,加入相应的判定的逻辑即可。

不足

  • 浏览器onkeydown监听不到中文输入事件。
  • 如果监听oninput事件,又取不到keyCode键值。
$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。