zoukankan      html  css  js  c++  java
  • 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之间的任意数字
  • 相关阅读:
    CountUp.js让页面数字跳动起来
    easing.js让页面动画丰富起来
    jQuery Lightbox效果插件Boxer
    aos.js让页面滚动变得丰富
    nodejs formidable混合表单提交
    css常见水平居中
    css渐变知识知多少
    大整数相加 a+b 的c语言实现
    字符串连接
    typedef在C和C++的区别?
  • 原文地址:https://www.cnblogs.com/baie/p/2622822.html
Copyright © 2011-2022 走看看