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面向对象设计一 工厂模式
Dec 20 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
javascript常用方法总结
May 14 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
js实现无缝轮播图效果
Mar 09 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防止sql注入的方法详解
2017/02/20 PHP
JavaScript的Cookies
2008/01/16 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python遍历小写英文字母的方法
2019/01/02 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python多线程分块读取文件
2019/08/29 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
班级德育工作实施方案
2014/02/21 职场文书
建筑工地标语
2014/06/18 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
安全责任书怎么写
2014/07/28 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
mysql 带多个条件的查询方式
2021/06/05 MySQL
python双向链表实例详解
2022/05/25 Python