js键盘事件怎么用?

     /** 键盘组合键  shift + 1 动态切换捕获插件开启*/

event.altKey

语法：event.altKey

取值：true | false  1|0

说明：

altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。 
altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
event.ctrlKey 
功能：检测事件发生时Ctrl键是否被按住了。

语法：event.ctrlKey

取值：true | false  1|0

说明：

ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。 
ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
event.shiftKey 
功能：检测事件发生时Shift键是否被按住了。

语法：event.shiftKey

取值：true | false  1|0

说明：

shiftKey属性为true表示事件发生时Shift键被按下并保持，为false则Shift键没有按下。 
shiftKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
 实例1 ：组合操作示例

 
<input id="txt1" type="text" value="Hello World!" οnclick="checkAlt(event)" />
 
<script type="text/javascript">
 
function checkAlt(oEvent)
 
{
 
if( oEvent.altKey )
 
document.getElementById("txt1").select();
 
}
 
</script>

这段代码的效果为： 如果按住Alt键再单击上面的文本框，可以选中文本框中的文本。

 
 实例2 ：组合操作示例

 
<input id="txt2" type="text" value="Hello World!" οnclick="clearText(event)" />
 
<script type="text/javascript">
 
function clearText(oEvent)
 
{
 
if( oEvent.ctrlKey && oEvent.keyCode==46 )
 
document.getElementById("txt2").value = "";
 
}
 
</script>

这段代码的效果为： 使用"Ctrl+Del"组合键可清除上面的文本框的内容。（必须先使文本框获得焦点。本例只适用于IE浏览器。）

 
 实例3 ：组合操作示例

 
<div id="box" style="width:50px; height:25px;border:1px solid black; background-color:red" οnclick="setColor(event)"></div>
 
<script type="text/javascript">
 
var b = true;
 
function setColor(oEvent)
 
{
 
if( oEvent.shiftKey && b )
 
document.getElementById("box").style.backgroundColor = "blue";
 
if( oEvent.shiftKey && !b )
 
document.getElementById("box").style.backgroundColor = "red";
 
b = !b;
 
}
 
</script> 

这段代码的效果为：按住"Shift"键并用鼠标点击上面的色块，可改变色块颜色

• keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
• keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
• keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

示例

下面示例实时捕获键盘操作的各种细节，即键盘响应事件类型及对应的键值。

<textarea id="key"></textarea>
<script>
var key = document.getElementById("key");
key.onkeydown =f;  //注册keydown事件处理函数
key.onkeyup = f;  //注册keyup事件处理函数
key.onkeypress = f;  //注册keypress事件处理函数
function f (e) {
var e = e || window.event;  //标准化事件处理
var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
key.value = s;
}
</script>

键盘事件属性

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。

示例1

ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。

document.onclick = function (e) {
var e = e || window.event;  //标准化事件对象
var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
if (e.ctrlKey && e.shiftKey) {  //如果同时按下Ctrl和Shift键
t.parentNode.removeChild(t);  //移出当前元素
}
}

keyCode 和 charCode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。
 

某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的，如下表所示。
 

示例2

下面示例演示了如何使用方向键控制页面元素的移动效果。

<div id="box"></div>
<script>
var box = document.getElementById("box");  // 获取页面元素的引用指针
box.style.position = "absolute";  // 色块绝对定位
box.style.width = "20px";  // 色块宽度
box.style.height = "20px";  // 色块高度
box.style.backgroundColor = "red";  // 色块背景
document.onkeydown = keyDown;
//在Document对象中注册keyDown事件处理函数
function keyDown(event){  // 方向键控制元素移动函数
var event = event || window.event;  // 标准化事件对象
switch(event.keyCode){  // 获取当前按下键盘键的编码
case 37 :  // 按下左箭头键，向左移动5个像素
box.style.left = box.offsetLeft - 5  + "px";
break;
case 39 :  // 按下右箭头键，向右移动5个像素
box.style.left = box.offsetLeft + 5 + "px";
break;
case 38 :  // 按下上箭头键，向上移动5个像素
box.style.top = box.offsetTop  - 5 + "px";
break;
case 40 :  // 按下下箭头键，向下移动5个像素
box.style.top = box.offsetTop  + 5 + "px";
break;
}
return false
}
</script>

在上面示例中，首先获取页面元素，通过 CSS 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型处理函数，在事件回调函数 keyDown() 中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的 offsetLeft 和 offsetTop 属性可以存取它在页面中的位置。

键盘响应顺序

当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。

对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。

如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。

如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。