输入框清空内容的时候会自动触发blur失焦事件，这个怎么解决

当输入框的内容被清空并导致失去焦点（即用户停止键入或选择其他元素），浏览器默认会认为输入框已经失去了焦点，因此可能会触发`blur`事件。如果你希望避免这种情况，你可以手动控制`blur`事件的发生，而不是依赖于内容的变化。

有几种解决方案可以尝试：

1. **阻止事件冒泡**：在输入框内容改变时，阻止`blur`事件继续向上层节点传播。例如，在JavaScript中，你可以使用`event.stopPropagation()`方法。

document.getElementById('inputBox').addEventListener('change', function(e) {
    e.stopPropagation();
    // 清空输入框内容
    this.value = '';
});

2. **延迟处理**：设置一个定时器，在清除内容后等待一段时间再触发`blur`。这样可以确保用户确实不再输入后再进行操作。

let timer;
function clearAndBlur() {
    clearTimeout(timer);
    this.value = '';
    timer = setTimeout(() => {
        this.blur();
    }, 100); // 设置适当的延迟时间
}

document.getElementById('inputBox').addEventListener('input', clearAndBlur);

3. **自定义事件**：创建一个自定义事件，如`contentCleared`，并在内容清空后触发它，而不是直接`blur`。

const inputBox = document.getElementById('inputBox');

inputBox.addEventListener('input', () => {
    if (inputBox.value === '') {
        inputBox.dispatchEvent(new CustomEvent('contentCleared'));
    }
});

inputBox.addEventListener('contentCleared', () => {
    inputBox.blur();
});