安庆 网站建设,让wordpress支持ssl,今天东莞封路,对网站建设的描述前言
焦点作为页面交互中的重要一环#xff0c;涉及到的知识点也比较多#xff0c;有必要做一个统一的总结。
HTML 中的可获取焦点的元素
具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…前言
焦点作为页面交互中的重要一环涉及到的知识点也比较多有必要做一个统一的总结。
HTML 中的可获取焦点的元素
具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElementHTMLIFrameElement虽然将其聚焦没有任何有用的效果具有 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-focusHTML 规范:dom-focus-devwhich-html-elements-can-receive-focusfocus_eventMDN: Tabindex, 键盘导航的 JavaScript 组件https://segmentfault.com/a/1190000003942014
