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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
js indexOf()定义和用法
Oct 21 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
1 Tube Radio
2021/03/02 无线电
PHP生成带有雪花背景的验证码
2008/09/28 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
jQuery示例收集
2010/11/05 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python实现ID3决策树算法
2017/12/20 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python实现简单登陆系统
2018/10/18 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
django基础学习之send_mail功能
2019/08/07 Python
Python中有几个关键字
2020/06/04 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
安全宣传标语
2014/06/10 职场文书
教师党员个人整改措施
2014/10/27 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
高中运动会广播稿
2015/08/19 职场文书