关于 focusable 与 tabindex 元素获得焦点的基本介绍

摘要:HTML 元素中,并不是所有元素都可以获得焦点,有如下元素可以获得焦点: a, area, button, input, object, select, textarea,这些元素就是 focusable 元素。

focusable

HTML 元素中,并不是所有元素都可以获得焦点,有如下元素可以获得焦点:a, area, button, input, object, select, textarea,这些元素就是 focusable 元素。

而除了上述元素之外,还可以通过如下方式使元素变为 focusable 元素:

  • 设置了 tabindex 属性的元素;
  • 设置了 contenteditable="true" 属性的元素。

要想一个 focusable 元素获得焦点,则有三种方式:

  • 使用鼠标点击元素;
  • 调用元素的 focus() 方法;
  • 通过 Tab 键进行切换。

tabindex

从字面上来讲,tabindex 就是一个组合词,其拆分出来就是 tab 和 index,其中 tab 指的是键盘上的 Tab 键(如果是 Mac 电脑的是 ➜| 键),而 index 就相当于 JavaScript 数组中的每个项的索引号。

简单形象的描述即是:tabindex 是用户操作 tab(➜|)的顺序,同时在操作该键所获得的元素。

tabindex 的一大作用就是让元素可以获得焦点,从而触发 focus 状态。tabindex 的另一个作用,就是设定 Tab 键切换的顺序。tabindex 有如下几个值:

  • 1 ~ 32767:通过 Tab 键切换时,切换顺序将遵循数字的大小(从小到大),数字相同则按出现的先后次序进行切换;
  • 0:默认值,当 tabindex > 0 的元素都切换之后,才会切换到 tabindex = 0 的元素,并且按出现的先后次序进行切换;
  • 负数(通常为 -1):通过 Tab 键无法切换到该元素,但鼠标点击可以获取焦点。
版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/focus-tab.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。