iOS设备点击取消按钮后Vue搜索输入框值未清除问题

开发者阿泽

2026-7-20

iOS设备上Vue搜索表单取消按钮失效的解决方案

问题根源

iOS Safari/Chrome的事件触发顺序和其他环境存在差异：点击取消按钮时，输入框的blur事件会先于取消按钮的click事件执行。如果handleBlur里的closeSearch方法（代码未完整展示）存在修改状态或重置输入的逻辑，会直接覆盖handleCancel中清空searchTerm的操作，导致输入框值无法正常清空。

解决方案

1. 拦截blur事件对取消操作的干扰

修改handleBlur方法，判断焦点转移目标是否为取消按钮，避免执行closeSearch：

handleBlur: function (e) {
    var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
    if (!isIE11) {
        const childFocused = e && e.relatedTarget && this.$el.contains(e.relatedTarget);
        // 新增判断：如果焦点移到取消按钮，不执行关闭逻辑
        const isCancelBtn = e.relatedTarget?.classList?.contains('search-box__cancel');
        if (!childFocused && !isCancelBtn) {
            this.closeSearch()
        }
    }
}

2. 优化取消按钮的事件处理

给取消按钮的点击事件添加阻止默认行为，并用微任务延迟设置焦点，确保输入框清空操作完成：

handleCancel: function (e) {
    e.preventDefault();
    e.stopPropagation();
    this.isActive = false;
    this.searchTerm = "";
    // 延迟聚焦，确保Vue响应式更新完成
    setTimeout(() => {
        setFocus(this.$refs.submitBtnEl);
    }, 0);
}

3. 兜底：直接操作DOM清空输入框

如果v-model绑定在iOS上仍有响应延迟，可直接操作DOM强制清空输入框：

handleCancel: function (e) {
    this.isActive = false;
    this.searchTerm = "";
    // 强制清空DOM元素值，作为v-model的兜底方案
    if (this.$refs.searchInputEl) {
        this.$refs.searchInputEl.value = "";
    }
    setFocus(this.$refs.submitBtnEl);
}