• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > html教程 >  html tabIndex属性详解正文

html tabIndex属性详解

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-07-10 09:53
分享到:
    我爱模板网在做下面的效果时,即按键盘上下键,能够让蓝色背景在行中移动,以选择不同的行,这个用js很好实现,但是由于列表比较多,所以超出了范围,使用了滚动条。可是,当用键盘移动到滚动条滚动范围之外时,发现滚动条不滚动,蓝色选中行已经到范围之外了,却看不到。最终百度到了办法,即给行所在的父级,即滚动条所在的容器加上“tabindex=-1”的属性,然后给他 focus,即焦点,然后再用上下箭头就可以了(当然,这也存在bug,即滚动了多少并不能预测,用js控制滚动条滚动方法更好点,不过没这个方便)。

tabIndex

    下面,我爱模板网就来聊聊这个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型的解析有关。
(责任编辑:网页模板)
  • 本文标签:
  • tabIndex
手机上文本框只能输入文字并且限制长度
html及html5的知识点记录