zoukankan      html  css  js  c++  java
  • div的keydown事件无效的原因及解决方案、tabindex属性的作用

      直接想在div上监听键盘事件是不行的,但是比如input那些是可以的,为什么?等会解释

    一、解决方案

      如果需要在div上监听键盘事件怎么办呢?

      其实也很简单,只需要在需要监听 keydown 事件的 div 的属性中加上 tabIndex=0 即可,即:

    <div tabindex="0" οnkeydοwn="alert('keydown');">...</div>

    二、tabindex属性的作用

      当使用键盘时,tabindex是个关键因素,它用来定位html元素

      tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)

      原本在Html中,只有链接a和表单元素可以被键盘访问(即使是a也必须加上href属性才可以),但是aria允许tabindex指定给任何html元素

      当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位

      当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。

      当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。

      在IE中,tabindex范围在1到32767之间(包括32767),在FF, Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关。

  • 相关阅读:
    SoftWater——SDN+UnderWater系列论文一
    《面向对象程序设计》2018年春学期寒假及博客作业总结
    2017级面向对象程序设计——团队作业3
    2017级面向对象程序设计——团队作业2
    生活
    一文搞懂transform: skew
    如何实现css渐变圆角边框
    使用腾讯云的图片缩略图服务
    谈谈实现瀑布流布局的几种思路
    vue cli 3 那些事儿
  • 原文地址:https://www.cnblogs.com/goloving/p/13220359.html
Copyright © 2011-2022 走看看