Chrome、FireFox等标准浏览器DIV无法触发onkeydown事件

在用HTML5的Video标签做播放器时,需要增加快捷键功能,却发现在Chrome下当按下键盘按键无法触发onkeydown事件,翻阅网上的资料有一种办法可以解决,在DIV上加入tabindex属性即可。


示例:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Video</title>
<script>
window.onload = function () {
var oDiv = document.getElementsByClassName('player')[0];
oDiv.onkeydown = function (ev) {
alert(ev.keyCode);
};
};
</script>
</head>
<body>
<div class="player" tabindex=0>
<video src="video/demo.mp4"></video>
</div>
</body>
</html>

tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。
 
把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中。 

这样,当浏览者使用TAB键在控件中移动时,将首先移动到具有最小tabIndex属性值的控件上,最后在具有最大tabIndex属性值的控件上结束移动。
 
如果有两个控件的tabIndex属性相同,则以控件在代码中出现的顺序为准。
 
默认的tabIndex属性为 0 ,将排列在在所有指定tabIndex的控件之后。 

而若把tabIndex属性设为一个负值(如tabIndex="-1"),那么这个链接将被排除在TAB键的序列之外。 

tabIndex的值可为0至32767之间的任意数字
posted @ 2012-08-04 13:18  baiezone  阅读(801)  评论(0编辑  收藏  举报