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 相关文章推荐
JS模板实现方法
Apr 03 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
js实现微博发布小功能
Jan 12 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 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中的正规表达式(二)
2006/10/09 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP attributes()函数讲解
2019/02/03 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
windows下python安装pip图文教程
2018/05/25 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
浅析matlab中imadjust函数
2020/02/27 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
应届生求职信写作技巧
2013/10/24 职场文书
2014年端午节活动方案
2014/03/11 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
实习生矿工检讨书
2014/10/13 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
同学聚会邀请函
2015/01/30 职场文书