在用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之间的任意数字