输入框闪屏现象及其解决方案

山遥水远

已于 2024-08-17 13:42:07 修改

阅读量296

点赞数 5

文章标签：前端 javascript html

于 2024-08-17 13:31:55 首次发布

本文链接：https://blog.csdn.net/a13974049801/article/details/141279214

版权

问题描述

在某些情况下，当用户点击一个按钮（例如 x 按钮）来清空输入框内容时，可能会观察到输入框短暂失去焦点然后重新获得焦点的现象。这种现象可能导致输入框的“闪屏”效果，即焦点的丢失和重新获得之间会有一个可见的短暂闪烁。

问题复现示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Flashing Example</title>
</head>
<body>
    <div>
        <input type="text" id="input-field" placeholder="Type something...">
        <button id="clear-button">x</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

// script.js
document.getElementById('clear-button').addEventListener('click', function() {
    // 清空输入框内容
    document.getElementById('input-field').value = '';
    // 尝试重新聚焦到输入框
    document.getElementById('input-field').focus();
});

为什么 click 事件可能导致闪屏？

在浏览器中，事件的触发顺序是：

mousedown 事件早于 blur事件。
blur事件早于click事件。

具体来说，当用户在输入框内输入内容，然后点击旁边的 x 图标来清空内容时，会发生以下事件顺序：

mousedown事件触发（当鼠标按下时）。
blur 事件触发（输入框失去焦点）。
click 事件触发（鼠标按下后释放时）。

当使用 click 事件来处理这种情况时，以下情况可能会发生：

用户点击 x 图标时，输入框的 blur 事件会先于 click 事件触发，从而导致输入框失去焦点。
之后，click 事件才会触发清空操作，这时输入框已经失去了焦点，除非手动重新设置焦点，否则焦点不会自动回到输入框。
如果你在 click 事件中再次设置输入框的焦点，可能会导致短暂的闪烁效果，即“闪屏”，因为焦点先丢失然后再重新获取。

解决方案

为了避免闪屏现象，通常建议在这种场景下使用 mousedown 事件，而不是 click 事件来处理点击操作。通过 mousedown 事件，您可以在输入框失去焦点之前完成清空操作，并且将焦点保持在输入框上。

// script.js
document.getElementById('clear-button').addEventListener('mousedown', function(event) {
    // 阻止默认事件，避免失去焦点
    event.preventDefault(); 
    // 清空输入框内容
    document.getElementById('input-field').value = ''; 
    // 保持焦点在输入框上
    document.getElementById('input-field').focus(); 
});