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 22 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
Django+Vue跨域环境配置详解
Jul 06 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
php中设置index.php文件为只读的方法
2013/02/06 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
保护环境演讲稿
2014/05/10 职场文书
师范生自荐信模板
2014/05/28 职场文书
见习报告怎么写
2014/10/31 职场文书
党员示范岗材料
2014/12/19 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis