导航后如何专注于输入字段 [英] How to Focus on Input Field after Navigation

问题描述

从子页面导航回来后如何专注于输入字段?

How to focus on input field after navigating back from a child page?

onNavigateBtnClick: function() {
    var oHistory = History.getInstance();
    var sPreviousHash = oHistory.getPreviousHash();
    if (sPreviousHash !== undefined) {
        history.go(-1);
    } else {
        var bReplace = true;
        this.getRouter().navTo("HomePage", {}, bReplace);
    }
},

父页面

onAfterRendering: function() {
    jQuery.sap.delayedCall(500, this, function() {
        this.getView().byId("InputField").focus();
    });
},

问题

1. 当导航返回按钮第一次被点击时，onAfterRendering 钩子被调用.
2. 如果我在子页面上执行某些操作然后单击导航返回按钮，则不会调用 onAfterRendering 方法.

1. When the nav back button is clicked first time, the onAfterRendering hook is called.
2. If I do some action on child page then click on the nav back button, the onAfterRendering method would not be called.

推荐答案

三步解决:

更新视图的 标签，使其具有 autoFocus="false".这将阻止 UI5 自动聚焦视图的第一个输入.

Update your <App> tag of the view to have autoFocus="false". This will prevent UI5 from autofocusing the first input of the view.

在控制器的 onInit 中，将方法附加到导航到视图时将触发的路由，如下所示:

In your controller's onInit, attach a method to the route that will fire when the view is navigated to, like this:

onInit: function(){
    var router = sap.ui.core.UIComponent.getRouterFor(this);

    router.getRoute("routeTargetName").attachPatternMatched(this.onNavTo, this);
}

在控制器中声明将设置输入焦点的 onNavTo 方法:

Declare the onNavTo method in your controller that will set the focus of your input:

onNavTo: function(route){
    this.byId("MyInputField").focus();
}

现在，无论何时您使用路由器navTo("routeTargetName")，onNavTo 方法都会触发，从而将焦点设置在该字段上.

Now whenever you use your router to navTo("routeTargetName"), the onNavTo method will fire, which will set focus on the field.

这篇关于导航后如何专注于输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！