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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
Node.js和Express简单入门介绍
Mar 24 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
JavaScript流程控制(循环)
Dec 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
php生成略缩图代码
2012/07/16 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JavaScript之自定义类型
2012/05/04 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
es6新特性之 class 基本用法解析
2018/05/05 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
家长对孩子的感言
2014/03/10 职场文书
高三英语教学计划
2015/01/23 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书