js input 不失去焦点

JavaScript 中的 input 元素失去焦点通常是由于用户点击了页面上的其他元素或者通过键盘操作（如按下 Tab 键）导致的。如果你希望 input 元素在某些情况下不失去焦点，可以通过以下几种方法实现：

基础概念

焦点（Focus）：在网页上，焦点是指当前用户交互的元素。通常，用户可以通过点击或使用键盘导航来设置焦点。
失去焦点（Blur）：当元素不再被聚焦时，会发生失去焦点的事件。

类型与应用场景

自动完成/建议：在搜索框或输入框中提供自动完成功能时，保持焦点可以让用户更流畅地选择建议项。
实时验证：在用户输入时即时进行数据验证，保持焦点可以确保用户能够立即看到反馈并进行修正。
表单填写：在复杂的表单填写过程中，保持焦点可以帮助用户连续填写多个字段。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 防止 input 元素失去焦点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prevent Input Blur</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="Type here...">
    <button onclick="preventBlur()">Click me without losing focus</button>

    <script>
        const inputElement = document.getElementById('myInput');

        function preventBlur() {
            // 重新设置焦点到 input 元素
            inputElement.focus();
        }

        // 可选：如果你想在点击按钮时也保持焦点，可以这样做
        document.querySelector('button').addEventListener('mousedown', (event) => {
            event.preventDefault(); // 阻止默认行为
        });
    </script>
</body>
</html>