ResponsivePopover/Dialog/Popover 中的焦点处理

问题描述

我很难理解 SAPUI5 中的自动焦点处理以及如何更改其默认行为:

I struggle to understand the automatic focus handling in SAPUI5 and how to change its default behavior:

假设我有一个带有 SearchField 的 ResponsivePopover.当我打开弹出框时，SearchField 会自动获得焦点.

Let's say I have a ResponsivePopover with a SearchField in it. When I open the popover, the SearchField gets focused automatically.

但是，当 聚合中包含一个 Button 时，它会获得焦点.

However when there is an <endButton> aggregation with a Button in it, it gets the focus instead.

在这里试试:JSbin:专注于 ResponsivePopover

function showPopover(oEvent) {
  var oRespPopover = new ResponsivePopover({
    showHeader: true,
    title: "title",
    content: [
      new SearchField(),
      // ...
    ],
    /*
    endButton: new sap.m.Button({
      text: 'close',
      press: function(oEvent) {
        oRespPopover.close();
      }
    }),
    */
    afterClose: function(oEvent) {
      oEvent.getSource().destroy();
    }
  });
  oRespPopover.openBy(oBtn);
};

一般问题

在哪里定义哪个控件获得焦点以及如何更改此行为?我检查了关于这个主题的实施焦点处理文档，但没有设法成就任何事.

General question

Where is defined which Control gets the focus and how can I change this behavior? I checked the Implementing Focus Handling documentation on this topic, but did not manage to achieve anything.

如何在没有 EndButton 聚合的情况下防止 SearchField 获得焦点(因为它会触发移动设备上的键盘)?

How can I prevent that the SearchField gets the focus (because that triggers the keyboard on mobile devices), without having an EndButton aggregation?

推荐答案

如果目标控件有一个稳定的 ID，您可以将该 ID 分配给 initialFocus ResponsivePopover 的关联，Dialog 或 Popover 以便即使 end/beginButton 聚合中存在按钮，目标控件也会获得焦点.

If the target control has a stable ID, you can assign that ID to the initialFocus association of the ResponsivePopover, Dialog, or Popover so that the target control gets focused even if there are buttons in the end/beginButton aggregation.

在可用时，按beginButton 和endButton 的顺序设置对popover 的关注.但是如果这两个按钮以外的控件需要获得焦点，则将initialFocus设置为应该获得焦点的控件.

在 XML 中:

initialFocus="myId">
<content>
  <SomeControl id="myId" />
</content>

或者在 JS(控制器)中:

// ...
title: "title",
initialFocus: this.getView().createId("myId"),
content: [
  new SomeControl({
    id: this.getView().createId("myId"),
  }),
// ...

注意:对于移动设备，初始焦点不会触发打开屏幕键盘.

---

Note: For mobile devices, initial focus does not trigger opening the on-screen keyboard.

将 initialFocus 设置为输入控件不会在移动设备上打开屏幕键盘，因为由于浏览器限制，无法使用 JavaScript 代码打开屏幕键盘.屏幕键盘的打开必须由真实用户触发动作.

这篇关于ResponsivePopover/Dialog/Popover 中的焦点处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！