Focusable

HTML 元素中,并不是所有元素都可以获得焦点,有如下元素可以获得焦点: aareabuttoninputobjectselecttextarea,这些元素就是
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的文章的更多相关文章

  1. iOS 转载一篇利用dispatch_once创建单例的文章

    感谢文章原作者,http://bj007.blog.51cto.com/1701577/649413

  2. 【转】转载一篇优质的讲解epoll模型的文章

    从事服务端开发,少不了要接触网络编程.Epoll 作为 Linux 下高性能网络服务器的必备技术至关重要,Nginx.Redis.Skynet 和大部分游戏服务器都使用到这一多路复用技术. Epoll ...

  3. tabindex 带有指定 tab 键顺序 或焦点 focus

    登录注册时,文本框输入焦点 TAB 键时,自定义下一个焦点的顺序 <input type=" /> <input type=" /> 带有指定 tab 键顺 ...

  4. 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...

  5. source insight 保存时删除多余空格,去除多余空格 space tab键

    source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...

  6. 使用回车键代替TAB键 需jquery1.4.2版本

    1 $(document).ready(function () { 2 $(':input:text:first').focus(); 3 $(':input:enabled').addClass(' ...

  7. 将回车键转tab键

    //功能:将回车键转tab键$(function () {$('input:text:first').focus();var $enter = $("input[type=text],but ...

  8. Qt之Tab键切换焦点顺序

    简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...

  9. JQuery实现回车代替Tab键(按回车跳到下一栏)

    一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...

随机推荐

  1. Go defer使用

    defer使用语法 //defer后面必须是函数调用语句或方法调用语句,不能是其他语句,否则编译器会出错. package main import ( "fmt" ) func f ...

  2. hack the box -- sizzle 渗透过程总结,之前对涉及到域内证书啥的还不怎么了解

     把之前的笔记搬运过来 ---   1 开了443,用smbclient建立空连接查看共享 smbclient -N -L \\\\1.1.1.1 Department Shares Operatio ...

  3. CSPS模拟 82

    还是Z哥的题,不过据说最后一题是D哥的 怪不得D2T3突然良心 (其实是突然毒瘤) 总分260大概是省三水平 不过和迪神并列了感觉还是很荣niu幸bi的- T1 考场上我弃了 因为是数学题,还要推柿子 ...

  4. 7.25 NOIP模拟8

    这次考试前面状态还行,后两个小时真是一言难尽,打了个T3的n^2暴力就懵逼了,不知道怎么优化. T1.匹配 看了一边题发现不太懂(这不是考试的难度啊),然后水完T2后回来5分钟水过,非常愉快的一道题. ...

  5. 《吊打面试官》系列-Redis终章_凛冬将至、FPX_新王登基

    你知道的越多,你不知道的越多 点赞再看,养成习惯 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难.作为一个在互联 ...

  6. [LINQ2Dapper]最完整Dapper To Linq框架(三)---实体类关系映射

    此特性需要安装Kogel.Dapper.Mssql或者Oracle 3.06及以上版本,实体类层需要安装Kogel.Dapper.Extension 3.06及以上版本 目录 [LINQ2Dapper ...

  7. html5 svg实现不规则形状图片触发事件

    html5 svg实现不规则形状图片触发事件<pre><!DOCTYPE html><html lang="en"> <head> ...

  8. Kubernetes(k8s)集群安装

    一:简介 二:基础环境安装 1.系统环境 os Role ip Memory Centos 7 master01 192.168.25.30 4G Centos 7 node01 192.168.25 ...

  9. java多线程与线程并发二:线程互斥

    本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 当两条线程访问同一个资源时,可能会出现安全隐患.以打印字符串为例,先看下面的代码: // public class Test2 { p ...

  10. 在小程序中使用md5

    使用md5.js的首先你要有md5.js这个文件https://github.com/emn178/js-md5 您也可以使用Bower安装js-md5. bower install md5 对于no ...