转载一篇关于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键选中下一个项目. ...
随机推荐
- Go defer使用
defer使用语法 //defer后面必须是函数调用语句或方法调用语句,不能是其他语句,否则编译器会出错. package main import ( "fmt" ) func f ...
- hack the box -- sizzle 渗透过程总结,之前对涉及到域内证书啥的还不怎么了解
把之前的笔记搬运过来 --- 1 开了443,用smbclient建立空连接查看共享 smbclient -N -L \\\\1.1.1.1 Department Shares Operatio ...
- CSPS模拟 82
还是Z哥的题,不过据说最后一题是D哥的 怪不得D2T3突然良心 (其实是突然毒瘤) 总分260大概是省三水平 不过和迪神并列了感觉还是很荣niu幸bi的- T1 考场上我弃了 因为是数学题,还要推柿子 ...
- 7.25 NOIP模拟8
这次考试前面状态还行,后两个小时真是一言难尽,打了个T3的n^2暴力就懵逼了,不知道怎么优化. T1.匹配 看了一边题发现不太懂(这不是考试的难度啊),然后水完T2后回来5分钟水过,非常愉快的一道题. ...
- 《吊打面试官》系列-Redis终章_凛冬将至、FPX_新王登基
你知道的越多,你不知道的越多 点赞再看,养成习惯 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难.作为一个在互联 ...
- [LINQ2Dapper]最完整Dapper To Linq框架(三)---实体类关系映射
此特性需要安装Kogel.Dapper.Mssql或者Oracle 3.06及以上版本,实体类层需要安装Kogel.Dapper.Extension 3.06及以上版本 目录 [LINQ2Dapper ...
- html5 svg实现不规则形状图片触发事件
html5 svg实现不规则形状图片触发事件<pre><!DOCTYPE html><html lang="en"> <head> ...
- Kubernetes(k8s)集群安装
一:简介 二:基础环境安装 1.系统环境 os Role ip Memory Centos 7 master01 192.168.25.30 4G Centos 7 node01 192.168.25 ...
- java多线程与线程并发二:线程互斥
本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 当两条线程访问同一个资源时,可能会出现安全隐患.以打印字符串为例,先看下面的代码: // public class Test2 { p ...
- 在小程序中使用md5
使用md5.js的首先你要有md5.js这个文件https://github.com/emn178/js-md5 您也可以使用Bower安装js-md5. bower install md5 对于no ...