转载一篇关于tab键与focus的文章
Focusable
HTML 元素中,并不是所有元素都可以获得焦点,有如下元素可以获得焦点: a
, area
, button
, input
, object
, select
, textarea
,这些元素就是
focusable 元素。
而除了上述元素之外,还可以通过如下方式使元素变为 focusable 元素:
- 设置了
tabindex
属性的元素 - 设置了
contenteditable="true"
属性的元素
要想一个 focusable 元素获得焦点,则有三种方式:
- 使用鼠标点击元素
- 调用元素的
focus()
方法 - 通过 Tab 键进行却换
tabindex
tabindex 的一大作用就是让元素可以获得焦点,从而触发 focus 状态。给联系人列表的元素 li 都加上该属性后,我遇到的问题也就解决了。
tabindex 的另一个作用,就是设定 Tab 键切换的顺序。tabindex 有如下几个值:
- 1 ~ 32767: 通过 Tab 键切换时,切换顺序将遵循数字的大小(从小到大),数字相同则按出现的先后次序进行切换
- 0: 默认值,当 tabindex > 0 的元素都切换之后,才会切换到 tabindex = 0 的元素,并且按出现的先后次序进行切换
- 负数(通常为 -1): 通过 Tab 键无法切换到该元素,但鼠标点击可以获取焦点
转载一篇关于tab键与focus的文章的更多相关文章
- iOS 转载一篇利用dispatch_once创建单例的文章
感谢文章原作者,http://bj007.blog.51cto.com/1701577/649413
- 【转】转载一篇优质的讲解epoll模型的文章
从事服务端开发,少不了要接触网络编程.Epoll 作为 Linux 下高性能网络服务器的必备技术至关重要,Nginx.Redis.Skynet 和大部分游戏服务器都使用到这一多路复用技术. Epoll ...
- tabindex 带有指定 tab 键顺序 或焦点 focus
登录注册时,文本框输入焦点 TAB 键时,自定义下一个焦点的顺序 <input type=" /> <input type=" /> 带有指定 tab 键顺 ...
- 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...
- source insight 保存时删除多余空格,去除多余空格 space tab键
source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...
- 使用回车键代替TAB键 需jquery1.4.2版本
1 $(document).ready(function () { 2 $(':input:text:first').focus(); 3 $(':input:enabled').addClass(' ...
- 将回车键转tab键
//功能:将回车键转tab键$(function () {$('input:text:first').focus();var $enter = $("input[type=text],but ...
- Qt之Tab键切换焦点顺序
简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...
- JQuery实现回车代替Tab键(按回车跳到下一栏)
一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...
随机推荐
- 一个九位数-python
有一个9位数由1~9的9个数字组成, 每个数字只能出现一次:其第一位能被1整除, 前两位能被2整除, 前三位能被3整除...依次类推,前9位能被9整除.所有的9位数中,只有一个数字满足这些条件,请你输 ...
- [考试反思]0819NOIP模拟测试26:荒芜
这么正式的考试,明天应该就是最后一次了吧 然而..今天,我仍然没能抓住机会 RNBrank1:.skyh还是稳.外校gmk拿走第三. 四五六名都是63-64.第七50.第八39.我和三个并列的是第九. ...
- 7.25 NOIP模拟8
这次考试前面状态还行,后两个小时真是一言难尽,打了个T3的n^2暴力就懵逼了,不知道怎么优化. T1.匹配 看了一边题发现不太懂(这不是考试的难度啊),然后水完T2后回来5分钟水过,非常愉快的一道题. ...
- Maven配置setting.xml详细说明
<?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...
- 我跟上家老板说过的最后一句话:转.NET Core吧
最近几天浩子终于刚刚脱离了令人发指工作,一者是年底了,一者是不要向生活低头,就在这时我选择了第二者. 上家是做物联网的,人数不多,七八名开发人员,感觉都还可以,都很年轻没有秃顶,糊里糊涂就选择了入职. ...
- MongoDB自学------(1)MongoDB4.0安装
一.环境 操作系统 安装包 安装方式 Ubuntu18.04 mongodb4.0 apt安装 Ubuntu18.04 mongodb4.0 docker安装 二.apt安装 sudo apt-key ...
- Python实现获取IP代码
代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/30 11:05 # @Desc : 获取ip # @File ...
- [转载]2.9 UiPath中断活动Continue的介绍和使用
一.Continue的介绍 跳过当前For Each 循环内的迭代, 结束本次循环,Continue控件只能用于For Each循环中 二.Continue在UiPath中结合For Each循环的使 ...
- docker——端口映射
端口映射 1.就是把容器的端口映射为宿主机的一个随机或者特定端口 2.使得外部用户可以访问容器服务 3.本质其实就是在底层做了iptables地址转发 4.出去的流量是做SNAT原地址转发 5.进来的 ...
- 2019年PHP最新面试题(含答案)
1. 数据库设计经验,为什么进行分表?分库?一般多少数据量开始分表?分库?分库分表的目的?什么是数据库垂直拆分?水平拆分?分区等等 一:为什么要分表 当一张表的数据达到几百万时,你查询一次所花的时间会 ...