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 MD4
Dec 20 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
video.js使用改变ui过程
Mar 05 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 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
yii中widget的用法
2014/12/03 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP引用返回用法示例
2016/05/28 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
简历中自我评价分享
2013/10/09 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书