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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
javascript基本类型详解
Nov 28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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调用三种数据库的方法(2)
2006/10/09 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
python unichr函数知识点总结
2020/12/16 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
海飞丝广告词
2014/03/20 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
小学教师师德整改措施
2014/09/29 职场文书
单位介绍信格式
2015/01/31 职场文书
学校体育节班级口号
2015/12/25 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
MySQL深分页问题解决思路
2022/12/24 MySQL