js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解


Posted in Javascript onMarch 15, 2017

前言

在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCodeevent.charCodeevent.which

其中:

谷歌浏览器:event.keyCodeevent.charCodeevent.which都兼容。

火狐浏览器:event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效。

event.which也是部分键值有效,如字母键,数字键,enter键,Backspace键等有效,对上下左右键,PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效,如字母键,数字键,,Backspace键等有效,对enter键,上下左右键,PgUp(33),PgDn(34)键无效。

ie浏览器:中,IE8及以下浏览器对event.charCode无效,event.keyCodeevent.which对大部分键值能获得,但是有少部分也不能获得

网络查看说event.which event.keyCode event.charCode 标准化了。但实际还是有区别的。

所以一般都这样写兼容:

e.keyCode<span class="hljs-params">||</span>e.which<span class="hljs-params">||</span>e.charCode;

jquery API地址:http://api.jquery.com/event.which/

如下例子介绍Query限制文本框只能输入数字和小数点的方法

$(function(){
 /*JQuery 限制文本框只能输入数字*/
 $(".NumText").keyup(function(){
  $(this).val($(this).val().replace(/[^0-9]/g,''));
 }).bind("paste",function(){ //CTR+V事件处理 
  $(this).val($(this).val().replace(/[^0-9]/g,''));
 }).css("ime-mode", "disabled"); //CSS设置输入法不可用 

 /*JQuery 限制文本框只能输入数字和小数点*/
 $(".NumDecText").keyup(function(){
  $(this).val($(this).val().replace(/[^0-9.]/g,''));
 }).bind("paste",function(){ //CTR+V事件处理 
  $(this).val($(this).val().replace(/[^0-9.]/g,''));
 }).css("ime-mode", "disabled"); //CSS设置输入法不可用 
 });

Keycode对照表如下:

js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
js计算页面刷新的次数
Jul 20 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
字太多用...代替的方法(两种)
Mar 15 #Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 #Javascript
You might like
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
Python注释详解
2016/06/01 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
行政经理岗位职责
2013/11/09 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS