js 用户按下键盘，显示keyCode实例
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给大家介绍一个js 用户按下键盘，显示keyCode实例，各位有需要了解的朋友可参考。...
|
js实例
| 代码如下 |
复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户按下键盘，显示keyCode</title>
<style>
body{
text-align:center;
font:30px/1.5 5fae8f6f96c59ed1, arial;
}
pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;text-align:left;}
span{color:#999;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oP = document.getElementsByTagName("p")[0];
document.onkeydown = function (event)
{
var event = event || window.event;
oP.innerHTML = event.keyCode;
return false
}
}
</script>
</head>
<body>
<p>这里将显示您按下键的 keyCode</p>
</body>
</html> |
当然我们也可以使用jquery event.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://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/网页特效">
$(document).click(function(e){
alert(e.which);
})
</script>
</head>
<body>
</body>
</html>
|
|
