HTML中的焦点管理

前言

焦点作为页面交互中的重要一环,涉及到的知识点也比较多,有必要做一个统一的总结。

HTML 中的可获取焦点的元素

  • 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement
  • 非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement
  • HTMLIFrameElement(虽然将其聚焦没有任何有用的效果)
  • 具有 tabindex 属性的任何元素。

焦点的获取

HTML 规范中将 focus 聚焦性分为三种类型:“编程可聚焦”、“单击可聚焦”和“顺序可聚焦”。

  • document 加载完成会获取到焦点
  • 用户点击获取焦点
  • 通过 js 的 element.focus()方法获取
  • 添加了 tabindex 的元素可通过 tab 切换获取焦点

其中,元素上 tabindex 的值设置有一定的考究:

CSS 中的焦点伪类

这里提一下, 聚焦的元素可以通过 css 中的:focus 与:focus-within 伪类来进行样式调整.

/* 元素获取焦点时的样式 */
input:focus {border-color: #ff5733;outline: none;
}/* 容器内有元素获得焦点时的样式 */
.container:focus-within {background-color: #f0f0f0;
}

在线效果预览

JS 获取当前聚焦元素

  • document.hasFocus(): 判断当前文档是否被聚焦
  • document.activeElement: 获取当前文档内的聚焦元素

失去焦点

blur()方法的作用是从元素中移走焦点。

  • 调用 blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

  • focus 了 A 元素的时候其他元素会自动失去焦点

document.querySelector("#btn1").addEventListener("click", () => {document.querySelector("#div1").focus();
});
document.querySelector("#btn2").addEventListener("click", () => {document.querySelector("#div1").blur();
});

焦点事件

不会冒泡的事件: focus, blur
会冒泡的事件: focus-in, focus-out

参考

  • HTML 规范: focusing-on-focus
  • HTML 规范:dom-focus-dev
  • which-html-elements-can-receive-focus
  • focus_event
  • MDN: Tabindex, 键盘导航的 JavaScript 组件
  • https://segmentfault.com/a/1190000003942014

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【VUE】使用elementUI tree组件根据所选id自动回显

需求如下&#xff1a; 1.点击父级节点 将父级节点下children中所有id放入数组 2.点击父级下的子节点 将点击的子节点放入数组 3.取消选择父节点&#xff0c;将放入数组的所有子节点id删除 4.根据选择的子节点数组&#xff0c;匹配他所属的父节点 <el-tree:data"tre…

Docker——compose单机容器集群编排

Docker——compose单机容器集群编排 一、Docker-compose概述1.为何需要Docker-compose2.Docker-compose 的特征3.Docker-compose 的优势4.Docker-compose 的劣势5.Docker-compose 的生产环境 二、Docker Compose 环境安装三、YAML 文件格式及编写注意事项四、Docker Compose配置…

Spin语法

消息传递 消息通道用于对数据从一个过程到另一个过程的传输进行建模。它们在本地或全局上声明,如下所示: chan qname = [16] of {short}这将声明一个通道,该通道最多可以存储16个short类型的消息。通道名称可以通过通道从一个进程传递到另一进程,也可以作为进程实例化中的…

STM32自学笔记17-步进电机驱动项目-磁编码器的正常使用

上节有这样一句话&#xff1a; 步进电机旋转角度和编码器输出数据之间的关系通常是非线性的。在校准过程中&#xff0c;可以通过采集一系列已知角度位置的数据点&#xff0c;并拟合出角度与编码器数据之间的关系。这个拟合可以使用曲线拟合算法或其他数学方法来实现。通过拟合&…

vscode使用g++编译.c文件或.cpp文件

vscode是一个跨平台、轻量级、插件非常丰厚的IDE&#xff0c;这里介绍在vscode里使用g来编译.cpp文件。g也叫GCC, 在Window中&#xff0c;是使用MinGW方式实现g的&#xff0c;它分为32位和64位2个版本&#xff0c;其中&#xff0c;MinGW-64是64位的&#xff0c;MinGW-32是32位的…

Hive解析JSON串

Hive 处理 json 数据总体来说有两个方向的路走&#xff1a; 将 json 以字符串的方式整个入 Hive 表&#xff0c;然后通过使用 UDF 函数解析已经导入到 hive 中的数据&#xff0c;比如使用 LATERAL VIEW json_tuple的方法&#xff0c;获取所需要的列名。 在导入之前将 json 拆成…

ConcurrentHashMap 相比于 HashMap 的优势

ConcurrentHashMap 使用每个链表头节点作为锁对象, 把一把大锁转换成多把小锁, 大大缩小了锁冲突的概率 HashTable 是给整个 Hash 表加锁, 因此只要有线程抢到了锁其他线程就得阻塞等待. ConcurrentHashMap 是对每个链表加锁, 因此只要不是对同一个链表进行修改就不会阻塞, 大…

【微信小程序】使用iView组件库的ActionSheet组件实现底部选择功能

效果1 效果2 要在微信小程序中使用iView组件库的ActionSheet组件&#xff0c;可以按照以下步骤进行&#xff1a; 首先&#xff0c;确保已经引入了iView组件库的样式和脚本文件。可以在app.wxss中引入iView的样式文件&#xff1a; import "/path/to/iview/weapp/dist/sty…

Ubuntu22.04部署K8s集群

Ubuntu22.04部署K8s集群 一、基础环境准备1.1 VMware Workstation Pro 17.01.2 Ubuntu22.04 二、系统环境配置2.1 设置Master与工作节点的机器名称及配置2.2 解析主机2.3 虚拟内存swap分区关闭2.4 开启IPv4转发2.5 设置时间同步2.6 开启防火墙的端口&#xff08;可选&#xff0…

linux下 UART串口相关

RS232的串口设备在linux 上会被识别为 /dev/ttyS* 或者 ttymxc* 一、串口简介 操作串口我们一般通过以下指令&#xff1a; 1、查看串口波特率等信息&#xff1a; stty -F /dev/ttyS0 -a #ttyS0为要查看的串口 2、设置串口参数&#xff1a; stty -F /dev/ttyS0 ispeed 115…

2023年java面试问题大全及答案大全

202年常见的Java面试问题和答案&#xff1a; Java中的基本数据类型有哪些&#xff1f; 答&#xff1a;Java中的基本数据类型包括整型(int, short, long, byte)、浮点型(float, double)、字符型(char)和布尔型(boolean)。 String和StringBuilder之间的区别是什么&#xff1f; 答…

微信小游戏个人开发者上架:从注册到上线的详细步骤

微信小游戏个人开发者上架&#xff1a;从注册到上线的详细步骤 一&#xff0c;注册小程序账号1.1 微信公众平台1.2 填写信息1.3 绑定管理 二&#xff0c;打包步骤2.1 工具准备2.2 关于Unity版本2.3 打包详解 三&#xff0c;提包步骤3.1 填写用户隐私3.2 完善开发者自查3.3 游戏…

5.string变量-读取一行

C里面的读一行的用法。getline&#xff08;cin,addr&#xff09;; 从标准输入设备cin&#xff0c;读取一行字符串保存到字符串变量addr中 如果用户直接回车什么都不读取就没有任何数据输入 读一行直到遇到回车符&#xff0c;注意不包括回车符。 判断字符串是不是空的 addr.em…

MYSQL的分类 DDL、DML、DQL、DCL

MySQL的分类 DDL、DML、DQL、DCL DDL(Data Definition Language&#xff0c;数据定义语言)DML(Data Manipulation Language&#xff0c;数据操纵语言)DQL(Data Query Language&#xff0c;数据查询语言)DCL(Data Control Language&#xff0c;数据控制语言) 1. DDL(Data Defi…

Cron 选择器

// 定义一个名为 cron 的新组件 Vue.component(cron, {name: cron,props: [data],data() {return {second: {cronEvery: ,incrementStart: 3,incrementIncrement: 5,rangeStart: ,rangeEnd: ,specificSpecific: [],},minute: {cronEvery: ,incrementStart: 3,incrementIncremen…

slam建图与定位_cartographer代码阅读(7)后端约束构建

1.cartographer里的节点:当扫描匹配结束后&#xff0c;有新的一帧scan加入到submap中&#xff0c;这个扫描匹配的结果就叫做节点 global_trajectory_builder.cc // 将匹配后的结果 当做节点 加入到位姿图中auto node_id pose_graph_->AddNode(matching_result->insertio…

2023年一建学霸笔记

考点:单方取消或辞去委托承担的民事责任女《民法典》规定&#xff0c;因解除合同造成对方损失的&#xff0c;除不可归责于该当事人的事由外&#xff0c;无偿委托合同的解除方应当赔偿因解除时间不当造成的直接损失&#xff0c;有偿委托合同的解除方应当赔偿对方的直接损失和合同…

简单理解TCP,UDP,HTTP

我们都知道TCP、UDP、HTTP内部有很复杂的过程&#xff0c;很多人没办法理解的那么深&#xff0c;只想知道这是个什么鬼。 1、TCP、UDP、HTTP 是什么? TCP/IP是个协议组&#xff0c;可分为三个层次&#xff1a;网络层、传输层和应用层。在网络层有IP协议、ICMP协议、ARP协议、…

关于云服务器ECS、宝塔的安装配置以及图床的使用

一、阿里云服务器的申请以及宝塔的安装 安装配置服务器的原理&#xff1a; step1&#xff1a;地址栏输入阿里云服务器官网地址 step2&#xff1a;在首页依次点击以下内容&#xff1a; step3&#xff1a;选择立即购买&#xff0c;并填写以下内容&#xff1a; step4&#xff1a…

Postman和Jmeter做接口测试的区别

1. 用例组织方式 Jmeter的组织方式相对比较扁平&#xff0c;它首先没有WorkSpace的概念&#xff0c;直接是TestPlan&#xff0c;TestPlan下创建的Threads Group就相当于TestCase&#xff0c;并没有TestSuite的层级。 Postman功能上更简单&#xff0c;组织方式也更轻量级&#…