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静态作用域的功能。
Dec 25 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
微信小程序实现弹框效果
May 26 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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/11/25 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
详解python读取image
2019/04/03 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
致800米运动员广播稿(10篇)
2014/10/17 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
亮剑观后感
2015/06/05 职场文书
跑出一片天观后感
2015/06/08 职场文书
学历证明样本
2015/06/16 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang