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 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
解决laravel session失效的问题
2019/10/14 PHP
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python3多线程基础知识点
2019/02/19 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python爬虫容易学吗
2020/06/02 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
详解Python中的文件操作
2021/01/14 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
C#面试题问题集
2016/04/02 面试题
高三毕业寄语
2014/04/10 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
介绍信范文
2015/01/31 职场文书
教师个人培训总结
2015/02/11 职场文书
2015新学期开学寄语
2015/02/26 职场文书
教师党员自我评价2015
2015/03/04 职场文书
中学政教处工作总结
2015/08/13 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python