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下过滤数组重复值的代码
Sep 10 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
VUE动态生成word的实现
Jul 26 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更快的提供文件下载的代码
2012/06/13 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
js最简单的双向绑定实例讲解
2018/01/02 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python2与Python3的区别点整理
2019/12/12 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python中的列表和元组区别分析
2020/12/30 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
中学生爱国演讲稿
2013/12/31 职场文书
文秘大学生求职信
2014/02/25 职场文书
开业典礼主持词
2014/03/21 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
考研复习计划
2015/01/19 职场文书