如何在视图中设置初始焦点?

时间:2016-04-02 17:32:55

标签: sapui5

我在SAPUI5应用程序中有一个详细信息视图,其中包含ID为"bestellmenge_tu"的单个输入字段。每当调用此视图时,焦点应该放在该输入字段上。不幸的是,当在控制器的onInit方法中将焦点设置在该字段上时,焦点将被设置,但是在几毫秒之后,UI5将其取走并将其传输到"导航返回&#34 ;细节视图的按钮。

通过在输入字段log.trace()事件上放置blur,我发现焦点被称为sap.ui.define.NavContainer._afterTransitionCallback的方法带走,该方法被异步调用(某些触发器和执行之间的window.setTimeout。该函数只是在视图中查找第一个可聚焦元素,并粗暴地将焦点切换到它上面。

我的解决方法是重新定义方法jQuery.fn.firstFocusableDomRef,用于找到这个"第一个可聚焦元素":

// DIESE KANONE FUNKTIONIERT
jQuery.fn.firstFocusableDomRef = (function() {
  var _default = jQuery.fn.firstFocusableDomRef;
  return function() {
    var bestellmenge_tu = document.querySelector("input[id$='bestellmenge_tu-inner']");
    if (bestellmenge_tu &&
        bestellmenge_tu.style.display !="none" &&
        bestellmenge_tu.style.visibility != "hidden") return bestellmenge_tu;
    else return _default.apply(this);
  }
})();

但这可能是一个性能问题(在{em>任何页面加载的DOM横向期间调用querySelector),并且编码太多以达到预期的效果。

有没有更简单的方法来实现这一目标?

我想到了像

这样的东西
<mvc:View controllerName="zrt_dispo.view.Detail"...>
  <Page id="detailPage" initialFocus="bestellmenge_tu">  <!-- ID of the element to carry the focus -->
  </Page>
</mvc:view>

2 个答案:

答案 0 :(得分:3)

以下是一个工作示例:https://embed.plnkr.co/wp6yes/

如果你有一个NavContainer(sap.m.Appsap.f.FlexibleColumnLayout),它的直接孩子,又名。 NavContainerChild(通常是View)可以对导航相关事件做出反应。在我们的例子中,我们应该根据API参考附加一个处理程序afterShow

/**
* With autoFocus="false" in NavContainer control.
* setTimeout is required as a workaround for UI5 versions below 1.63.
* Otherwise, you can remove it.
*/
const onAfterShow = () => setTimeout(() => this.byId("thatControl").focus());
this.getView().addEventDelegate({ onAfterShow });
  

afterShow事件可用于关注其他元素,仅当autoFocus设置为false [source] < / SUP>

动画完成后会触发事件处理程序。最重要的是:

  

当NavContainer使此子控件可见时,此事件每次 <(与onAfterRendering相反)触发

sap.ui.core.Control扩展sap.ui.core.Element以来,每个控件都可以通过focus()获得焦点。

UI5 1.62及以下

中的错误

但仅在focus()中调用onAfterShow仍会让用户在用户导航回来时将焦点设置在第一个可聚焦元素上,即使使用autoFocus="false"也是如此(请参阅此GitHub issue )。

因此,需要额外的setTimeout 0 ms(或requestAnimationFrame)才能让浏览器知道该元素应该集中于call stack的结尾,意味着在UI5认为它完成了最初预期的一切之后的重点。

使用this commit,从1.63开始提供,不再需要解决方法。

答案 1 :(得分:1)

NavContainer有一个属性autoFocusAppNavContainer的后代,所以它也具有该属性。 帮助(如上所述)说明如下:

  

确定在首次渲染时和导航到新页面后是否自动设置初始焦点。当触摸设备上的键盘弹出时,由于焦点在输入字段上自动设置,这非常有用。如有必要,可以使用“afterShow”事件来聚焦另一个元素。

     

默认值为true。