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 17 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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 缩略图实现函数代码
2011/06/23 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python导出hive数据表的schema实例代码
2018/01/22 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
财务会计专业推荐信
2013/11/30 职场文书
影视制作岗位职责
2013/12/04 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
党员培训思想汇报
2014/01/07 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书