详解input聚焦

小蓝 • 2024-12-22 15:43 • 编程

一、聚焦的含义及用途

聚焦，指的是用户将鼠标或键盘焦点移动到了某一个具有聚焦效果的元素上。常见的聚焦元素包括input、textarea、button等，通过聚焦可以提高用户交互体验和操作效率。

在实际应用中，聚焦用途广泛。比如说，在搜索框中当用户聚焦后可以自动提示输入内容，提高用户搜索效率，亦或者在表单中聚焦到必填项上以提醒用户填写等等。

二、聚焦事件

聚焦事件指的是当聚焦事件触发时所执行的事件。在HTML中，可以使用onfocus事件来定义聚焦事件的触发操作。如下示例所示：

<input type="text" onfocus="console.log('input is focused')"></input>

上述代码定义了一个input元素，并添加了onfocus事件，当此元素被聚焦时会在浏览器控制台打印’input is focused’。

除了onfocus事件，还有onblur事件。当给定元素失去焦点时，onblur事件将会被激活。在应用中，可以使用onblur事件来检查用户填写的内容是否合规等操作。

三、聚焦样式

通过CSS，我们可以为获取焦点的元素添加聚焦样式。这里介绍两种方式：

使用:focus伪类

:focus伪类表示鼠标或键盘焦点已经落到了此元素上。可以通过给元素添加:focus伪类来定义聚焦状态下的样式。

input:focus {
    border-color: blue;
}

上述代码定义了一个input元素，当此元素被聚焦时边框将变成蓝色。

使用:focus-within伪类

:focus-within伪类表示当此元素或其任何后代元素具有焦点时，此元素都会被选中。可以通过:focus-within伪类来定义任何在聚焦状态下的子元素的样式。

.container:focus-within {
    background-color: lightgreen;
}

上述代码定义了一个类名为container的元素，当此元素或其任何后代元素被聚焦时，该元素的背景色将变成浅绿色。

四、聚焦操作

在实际应用中，我们常常需要对用户的聚焦行为进行操作，下面我们介绍两种常见的聚焦操作方法。

自动聚焦

在一些情况下，需要将用户的聚焦行为转化为代码动作。例如，加载页面时自动聚焦到搜索框，或在表单中自动聚焦到第一个输入项等。通过给需要自动聚焦的元素设置autofocus属性即可实现自动聚焦。

<input type="text" autofocus></input>

手动聚焦

手动聚焦在一些复杂交互组件中也有广泛的应用。比如在输入框聚焦时显示下拉框，在下拉框中选择后自动聚焦到下一个输入框等。通过JavaScript代码，我们可以手动将焦点聚焦到特定元素上。

let input = document.querySelector('input');
input.focus();

五、聚焦辅助技术

无障碍聚焦技术是指在整个聚焦交互过程中，让视觉障碍用户或者其他特殊情况下的用户能够更好地理解UI元素的聚焦情况。对于这些用户，我们需要使用一些特殊的聚焦辅助技术。

使用aria-label和aria-labelledby

在一些具有表单标签的字段中，我们可以通过使用aria-labelledby/aria-label进行标签的提醒，以便于盲人用户理解当前所处的聚焦下的表单项是什么。

<label for="username">用户名</label>
<input type="text" id="username" aria-labelledby="username"></input>

使用aria-invalid

在表单项校验不合规时，需要把aria-invalid=true添加到input或与其相关的元素中，以便于在UI上高清出当前节点是不合规的。

<input type="text" aria-invalid="true"></input>

使用aria-describedby

如果有的标签在输入起来不足够清晰时需要补充说明，可以用`aria-describedby`在输入框前提示或后来增加补充说明性文本。

<label for="username">用户名</label>
<input type="text" id="username" aria-describedby="description-validation"></input><p id="description-validation">用户名必须为3-10个字符</p>

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285011.html