SAP UI5/Fiori中控制Input组件change事件不触发于外部应用/标签页切换

问题根源是sap.m.Input的change事件默认只要控件失焦就会触发——不管焦点是移到页面内其他元素，还是切到Outlook、其他浏览器标签页这类外部场景。要实现需求，核心是区分“页面内失焦”和“页面外失焦”，只在前者执行校验清空逻辑。

下面是几种可行的实现方案：

方案1：用document.hasFocus()直接判断页面状态 #

在你的change事件处理函数开头加个判断：如果当前页面已经失去焦点（用户切到外部了），直接跳过后续逻辑：

onInputChange: function(oEvent) {
    // 页面没焦点？直接返回，不执行校验清空
    if (!document.hasFocus()) {
        return;
    }
    // 原来的校验逻辑
    const inputValue = oEvent.getParameter("value");
    if (/* 这里放你的校验条件，比如值不符合规则 */) {
        oEvent.getSource().setValue("");
        // 其他错误提示逻辑（比如弹消息）
    }
}

方案2：监听页面可见性变化标记状态 #

在控制器初始化时监听页面的visibilitychange事件，维护一个状态变量，在change事件里判断这个变量：

onInit: function() {
    this._pageIsVisible = true;
    // 监听页面可见性变化
    document.addEventListener("visibilitychange", () => {
        this._pageIsVisible = !document.hidden;
    });
},

onInputChange: function(oEvent) {
    // 页面不可见时，不执行校验清空
    if (!this._pageIsVisible) {
        return;
    }
    // 原有的校验清空代码
}

方案3：通过blur事件判断焦点去向 #

给Input绑定blur事件，记录焦点是不是移到了当前页面内的元素，再在change事件里参考这个标记：

onInit: function() {
    this._focusStaysInPage = true;
    // 给目标Input绑定blur事件
    const inputControl = this.byId("yourInputId");
    inputControl.attachEvent("blur", (oBlurEvent) => {
        // relatedTarget为空，或者不属于当前文档，说明焦点移到外部了
        this._focusStaysInPage = !!oBlurEvent.relatedTarget && oBlurEvent.relatedTarget.ownerDocument === document;
    });
},

onInputChange: function(oEvent) {
    if (!this._focusStaysInPage) {
        return;
    }
    // 原有的校验清空逻辑
}

小提示 #

• 方案1和2兼容性很好，现代浏览器都支持；
• 方案3要注意如果你的应用里有iframe，可能需要额外处理跨iframe的焦点判断；
• 测试的时候可以多切换几次外部应用/标签页，确保逻辑生效。

内容的提问来源于stack exchange，提问作者Teja