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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
js实现分页功能
May 24 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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
PHP 超链接 抓取实现代码
2009/06/29 PHP
php开发环境配置记录
2011/01/14 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python元字符的用法实例解析
2018/01/17 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
教堂婚礼主持词
2014/03/14 职场文书
高中课程设置方案
2014/05/28 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
市场总监岗位职责
2015/02/11 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android