jquery利用event.which方法获取键盘输入值的代码


Posted in Javascript onOctober 09, 2011

实例
显示按了哪个键:
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
亲自试一试
定义和用法
which 属性指示按了哪个键或按钮。
语法
event.which参数 描述
event 必需。规定要检查的事件。这个 event 参数来自事件绑定函数。
jQuery丢弃了标准的 button 属性采用 which,这有点让人费解。
which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。
jQuery中的which即可以是键盘的键值,也可以是鼠标的键值。
即当判断用户按下键盘的哪个键时可以使用which,当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。
源码:

// Add which for key events 
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) { 
event.which = event.charCode != null ? event.charCode : event.keyCode; 
} 
// Add which for click: 1 === left; 2 === middle; 3 === right 
// Note: button is not normalized, so don't use it 
if ( !event.which && event.button !== undefined ) { 
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); 
}

标准的button采用0,1,2表示鼠标的左,中,右键。jQuery的which则使用用1,2,3。
还有一点让人不爽的是jQuery文档 event.which 中并没有提到which可以表示鼠标按键值,只提到了表示键盘按键值。
源码中的注释也让人误解。
// Add which for click: 1 === left; 2 === middle; 3 === right
注意这里说的是click ,很容易让人使用click 事件,但实际上click事件中获取是错误的。
下面就用 click 事件试试:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.6.1.js"></script> 
<script type="text/css"> 
$(document).click(function(e){ 
alert(e.which); 
}) 
</script> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
javascript之bind使用介绍
Oct 09 #Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 #Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
jQuery实现切换页面布局使用介绍
Oct 09 #Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 #Javascript
关于jQuery的inArray 方法介绍
Oct 08 #Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 #Javascript
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php通过字符串调用函数示例
2014/03/02 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
curl和libcurl的区别简介
2015/07/01 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python中的作用域规则详解
2015/01/30 Python
python制作最美应用的爬虫
2015/10/28 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python subprocess模块常见用法分析
2018/06/12 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
什么是类的返射机制
2016/02/06 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
捐书活动总结
2014/05/04 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
综合测评自我评价
2015/03/06 职场文书
复试通知单模板
2015/04/24 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
公司管理建议书
2015/09/14 职场文书
导游词之江南周庄
2019/12/06 职场文书
全新239军机修复记
2022/04/05 无线电