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 伪类来进行样式调整.

css 复制代码
/* 元素获取焦点时的样式 */
input:focus {
  border-color: #ff5733;
  outline: none;
}

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

在线效果预览

JS 获取当前聚焦元素

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

失去焦点

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

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

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

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

焦点事件

不会冒泡的事件: focus, blur

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

参考

相关推荐
懒羊羊大王&2 分钟前
5、qt系统相关
前端·qt
魔都吴所谓3 分钟前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
江城开朗的豌豆6 分钟前
Vue3 数据绑定的进化:为什么Proxy取代了defineProperty
前端·javascript·vue.js
DoraBigHead12 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我14 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马21 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆22 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder23 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder23 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆28 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js