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 事件流和事件绑定
Jul 16 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
初学node.js中实现删除用户路由
May 27 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP中的extract的作用分析
2008/04/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python编码最佳实践之总结
2016/02/14 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python如何生成网页验证码
2018/07/28 Python
Python读取csv文件实例解析
2019/12/30 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
工地安全检查制度
2014/02/04 职场文书
工地宣传标语
2014/06/18 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
学校证明范文
2015/06/24 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技