如何在SAPUI5中实现光标始终固定在指定Input控件上

核心逻辑是通过全局焦点事件监听，在焦点离开目标输入框时自动回拉，同时在页面加载完成后主动初始化焦点，全程不需要轮询，性能无压力。

具体实现步骤 #

• 视图层定义目标输入控件
  在XML视图中给需要固定光标的Input控件设置固定ID，方便后续控制器获取实例：

<!-- 其他页面内容 -->
<Input
  id="pasteTargetInput"
  placeholder="粘贴文本输入区"
  value="{/currentPasteText}"
/>
<!-- 其他页面内容 -->

• 控制器层实现焦点控制逻辑
  利用SAPUI5生命周期钩子，在页面DOM渲染完成后绑定全局监听，页面销毁时解绑事件避免内存泄漏：

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("com.demo.controller.Main", {
    onAfterRendering: function() {
      // 缓存目标输入框实例
      this._oPasteInput = this.byId("pasteTargetInput");
      // 首次渲染完成后主动聚焦
      this._setFocusToTarget();

      // 绑定全局焦点捕获事件，所有元素获得焦点都会触发该监听
      this._fnGlobalFocusCheck = (oEvent) => {
        const oCurrentFocus = oEvent.target;
        const oInputDom = this._oPasteInput?.getDomRef();
        // 如果当前焦点不在目标输入框范围内，立刻拉回焦点
        if (oInputDom && !oInputDom.contains(oCurrentFocus)) {
          this._setFocusToTarget();
        }
      };
      document.addEventListener("focusin", this._fnGlobalFocusCheck);
    },

    /**
     * 聚焦目标输入框，同时将光标定位到文本末尾，优化粘贴体验
     */
    _setFocusToTarget: function() {
      const oInputDom = this._oPasteInput?.getDomRef();
      if (!oInputDom) return;
      
      oInputDom.focus();
      // 光标定位到现有文本末尾，不会打乱已有内容
      const iTextLen = oInputDom.value.length;
      oInputDom.setSelectionRange(iTextLen, iTextLen);
    },

    onExit: function() {
      // 页面销毁时移除全局监听，防止内存泄漏
      if (this._fnGlobalFocusCheck) {
        document.removeEventListener("focusin", this._fnGlobalFocusCheck);
      }
    }
  });
});

注意事项 #

• 不要使用定时轮询方案：不要用setInterval定时检查焦点位置，事件监听的性能开销远低于轮询，不会造成页面不必要的资源消耗
• 特殊场景兼容：如果页面存在弹窗、下拉菜单等需要临时获取焦点的交互，可以增加一个状态标记，在这类交互触发时暂时跳过焦点回拉逻辑，交互结束后再恢复
• 粘贴体验优化：聚焦时主动将光标定位到文本末尾，避免光标出现在文本开头导致粘贴内容顺序错乱，用户不需要额外点击输入框，直接按粘贴快捷键即可完成操作

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