当前位置: 首页 > news >正文

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

相关文章:

HTML中的焦点管理

前言 焦点作为页面交互中的重要一环,涉及到的知识点也比较多,有必要做一个统一的总结。 HTML 中的可获取焦点的元素 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…...

如何区分接口测试和功能测试

接口测试和功能测试的区别: 2023最新Jmeter接口测试从入门到精通(全套项目实战教程) 本文主要分为两个部分: 第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者…...

limit分页查询

controller层 ApiOperation("员工分页查询")GetMapping("/page")public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO){log.info("员工分页查询&#xff0c;参数为{}",employeePageQueryDTO);PageResult pageResul…...

mysql null 值查询不出来问题

最新遇到mysql null 值查询的问题&#xff0c;当查询这个字段有的为null 有的不为null 该字段查询条件查询为null值得将不显示。 举例 新建表 test_user name和phone得值默认值为null 我们添加一些数据 查询下name 不是张三得数据 select * from test_user where name !张…...

面试之CurrentHashMap的底层原理

首先回答HashMap的底层原理? HashMap是数组链表组成。数字组是HashMap的主体&#xff0c;链表则是主要为了解决哈希冲突而存在的。要将key 存储到&#xff08;put&#xff09;HashMap中&#xff0c;key类型实现必须计算hashcode方法&#xff0c;默认这个方法是对象的地址。接…...

Error in onLoad hook: “ReferenceError: plus is not defined“ found in

项目场景&#xff1a; 项目背景如下所示&#xff1a; 使用 HBuilder X 开发 项目&#xff0c; 调整页面时&#xff0c;直接运行到 浏览器查看页面设置效果&#xff0c;导致控制台出现下述报错信息 例如&#xff1a; 问题描述 遇到的问题如下所示&#xff1a; APP 中接收数据…...

ansible自动化运维(二)剧本、角色编写实战

&#x1f618;作者简介&#xff1a;一名运维工作人员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;动动小…...

【Spring框架】@Resource注入以及与@Autowired的区别

目录 使用Resource设置name的方式来重命名注入的对象区别 使用Resource设置name的方式来重命名注入的对象 package com;import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPathXmlApplicationContext; import org.spr…...

FTP服务器的搭建和配置上传脚本

文章目录 前言一、配置本地用户可上传权限ftp服务器1、用户登录ftp 二、配置FTP上传脚本文件1.脚本代码如下 补充知识 前言 vsftpd&#xff08;Very Secure FTP Daemon&#xff09;是一个在 Linux/Unix 系统上运行的一款开源免费的 FTP 服务器软件。vsftpd 支持支持 匿名用户、…...

Ubuntu22.04上部署Lua开发环境

需求背景 想在Ubuntu22.04上搭建一下Lua的开发环境&#xff0c;其实步骤比较简单的&#xff0c;此文章也适用于Ubuntu主机环境搭建Lua,如果想在在Ubuntu内部署一个容器&#xff0c;然后在容器内搭建Lua的环境&#xff0c;可以先参考容器的创建过程 ubuntu22.04上如何创建有pri…...

React的hooks---自定义hooks

通过自定义 Hook&#xff0c;可以将组件逻辑提取到可重用的函数中&#xff0c;在 Hook 特性之前&#xff0c;React 中有两种流行的方式来共享组件之间的状态逻辑&#xff1a;render props和高阶组件&#xff0c;但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使…...

Asp.Net 使用Log4Net (基础版)

Asp.Net 使用Log4Net (基础版) 1. 创建项目 创建ASP.NET Web Forms项目 在Visual Studio中创建一个新的ASP.NET Web Forms项目。命名为"Log4NetDemo"。 2.安装Log4Net包 打开NuGet包管理器控制台&#xff0c;并运行以下命令来安装Log4Net&#xff1a; mathemati…...

STM32 互补PWM 带死区 HAL

1、设置PWM波频率100KHz&#xff0c;占空比50%&#xff0c;死区时间1us 2、 while 循环之前启动PWM HAL_TIM_PWM_Start(&htim1, TIM_CHANNEL_1); //启动TIM1_CH1 PWM输出 HAL_TIMEx_PWMN_Start(&htim1,TIM_CHANNEL_1);//启动TIM1_CH1N PWM输出 3、死区计算 DT_time…...

20230721在WIN10下安装openssl并解密AES-128加密的ts视频切片

20230721在WIN10下安装openssl并解密AES-128加密的ts视频切片 2023/7/21 22:58 1、前言&#xff1a; AES-128加密的ts视频切片【第一个】&#xff0c;打开有时间限制的&#xff01; https://app1ce7glfm1187.h5.xiaoeknow.com/v2/course/alive/l_64af6130e4b03e4b54da1681?typ…...

使用Python实现产品图片自动化处理

大家好&#xff0c;在当今的数字化时代&#xff0c;产品图片在电子商务和市场营销中发挥着至关重要的作用。然而&#xff0c;为在线平台准备产品图片可能是一项耗时的任务&#xff0c;本文将分享一个Python脚本&#xff0c;用于自动化产品图片的图像处理工作流程。通过使用Pyth…...

在CSDN学Golang云原生(git)

一&#xff0c;git的工作流程 Golang的Git工作流程与其他语言的Git工作流程类似&#xff0c;通常包括以下步骤&#xff1a; 创建分支&#xff1a;在本地代码库中创建一个新的分支&#xff0c;该分支用于开发新功能或修复错误。编写代码&#xff1a;在创建的分支上进行编码&am…...

QT多线程编程基础

文章目录 前言一、线程&#xff0c;进程 介绍二、创建线程三、终止线程总结 前言 一、线程&#xff0c;进程 介绍 线程&#xff1a; 是操作系统中独立运行的最小单位。每个线程都有自己的执行路径、程序计数器、堆栈和一组寄存器。线程共享进程的资源&#xff0c;如内存和文件…...

TRT4-trt-integrate - 3 使用onnxruntime进行onnx的模型推理过程

前言&#xff1a; onnx是microsoft开发的一个中间格式&#xff0c;而onnxruntime简称ort是microsoft为onnx开发的推理引擎。允许使用onnx作为输入进行直接推理得到结果。 py接口的推理过程&#xff1a; main函数&#xff1a; if __name__ "__main__":session onn…...

layui+drogon完成文件上传(简例)

layui界面加入按钮、文本框、进度条&#xff1a; <div class"layui-row"><button type"button" class"layui-btn" id"file_upload_control">文件上传</button><input type"file" id"files_input…...

高精度地图服务引擎项目

技术栈&#xff1a;使用vue3TypeScriptElement PlusPiniaaxios 项目描述&#xff1a;高精度地图服务引擎项目&#xff0c;提供轻量化处理3D瓦片切片分布式处理分发服务的一站式解决方案 工作内容&#xff1a;1、项目60%已上的页面开发 2、部分模块的功能实现&#xff0c; 3、封…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...

npm安装electron下载太慢,导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...

C++ Saucer 编写Windows桌面应用

文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架&#xff0c;开发Windows桌面应用&#xff0c;把一个html页面作为GUI设计放到Saucer里&#xff0c;隐藏掉运行时弹…...