input 手写清除按钮blur冲突

输入框（通常指的是文本框或其他用户编辑区域）中的手写清除按钮和失去焦点（blur）事件之间可能会发生冲突。当用户点击清除按钮意图删除输入内容后，如果这个操作同时也触发了按钮的默认行为（如自动关闭或失去焦点），可能会导致预期的行为不一致。

例如，当用户点击清除按钮后想要保留输入框聚焦以便继续输入，但因为blur事件使得输入框失去了焦点，用户可能需要额外操作才能重新聚焦。这可能导致用户体验不佳。

解决这个问题的一种方法是阻止清除按钮的默认行为，并确保只有在用户明确交互清除按钮时才执行清除功能。另一种方式是在清除动作完成后手动调用`focus()`方法来恢复输入框的聚焦状态。代码示例可能看起来像这样：

// 假设clearButton是一个HTML元素
clearButton.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的清除动作
  // 清除输入内容...
  input.value = '';
  input.focus(); // 然后手动聚焦输入框
});

相关问题

el-input中clearable为true时点击清空会先处理clear事件，后面再点击任意地方则会触发blur事件，怎么避免blur事件在这种情况下触发

可以通过在 clear 事件中使用 `event.stopPropagation()` 方法来阻止点击 clear 按钮时触发的 click 事件继续冒泡到 el-input 上，从而避免触发 blur 事件。具体做法是，在 el-input 绑定 clear 事件，在事件处理函数中调用 `event.stopPropagation()` 方法，如下所示：

<el-input v-model="inputValue" clearable @clear="onClear"></el-input>

methods: {
  onClear(event) {
    event.stopPropagation();
    // do something else
    // ...
  }
}

这样，当用户点击清空按钮时，就不会触发 click 事件继续冒泡到 el-input 上，从而避免了触发 blur 事件的问题。