搜索栏显示时如何聚焦？

问题描述 投票：0回答：3

我有一个主从应用程序（HideMode中的SplitContainer）

在我的主页中，我有一个列表项，顶部有一个搜索输入。从任何页面，如果我打开母版，我总是有相同的母版列表页面。

我希望当我打开主控时焦点转到搜索输入。在这种模式下，用户不必单击输入即可开始写入，但已经存在了

打开 SelectDialog 时可以执行相同的操作吗？ https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.SelectDialog/samples

sapui5
3个回答
1
投票

您应该在主控制器初始化或触发 after show 事件时实现焦点处理。 示例：

sap.ui.controller("com.view.Master", {

    onInit: function() {
        this.getView().addEventDelegate({
            onAfterShow: function(oEvent) {
                //focus handling
                sap.ui.getCore().byId("searchFieldId").focus();
            }
        });
    }
}

是的，您可以在 SelectDialog 控件中执行相同的操作。

参见：SAPUI5 - 实现焦点处理

1
投票

我找到了解决方案。谢谢@cobeete 在我的母版页的 

onInit
功能中我写了：

sap.ui.getCore().byId("splitApp").attachAfterMasterOpen(function () {
            sap.ui.getCore().byId("UniversalMenu--searchItemFiled").focus();
});

其中 

splitApp
是我的 sap.m.SplitApp ，
UniversalMenu
是包含搜索字段的母版页 
searchItemFiled

1
投票

在页面上设置初始焦点通常在我的其他答案中进行了解释：How to Set Initial Focus in a View?

但是在 

SplitApp
或 
SplitContainer
中，只需在 
focus()
事件处理程序中调用 
afterMasterOpen
就足够了。

<SplitApp afterMasterOpen=".onAfterMasterOpen">

onAfterMasterOpen() {
  // If thatSearchField is defined in the same View:
  this.byId("thatSearchField").focus();
},

如果搜索字段不在定义 SplitApp 的同一视图中，请考虑利用 

EventBus
：SAPUI5 中的 EventBus 有何用途？.

当我打开 SelectDialog 时可以执行相同的操作吗？

是的。从 1.117 开始（提交：

14b9420
），可以在 initialFocus="SearchField"
 控件中设置
sap.m.SelectDialogBase
，例如 
SelectDialog
 和 
TableSelectDialog
。请参阅以下示例：






globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], async (XMLView, JSONModel) => {
  "use strict";
  
  sap.ui.define("my/demo/Controller.controller", [
    "sap/ui/core/mvc/Controller",
  ], Controller => {
    "use strict";
    return Controller.extend("my.demo.Controller", {
      onButtonPress() {
        this.byId("selectDialog").open();
      },
    });
  });
 
  const control = await XMLView.create({
    definition: document.getElementById("myxmlview").textContent,
    height: "100%",
    models: new JSONModel([
      {
        title: "Item 1",
      },
      {
        title: "Item 2",
      },
      {
        title: "Item 3",
      }
    ]),
  });
  control.placeAt("content");
});


<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
  data-sap-ui-async="true"
  data-sap-ui-resourceRoots='{ "my.demo": "./" }'
  data-sap-ui-onInit="onUI5Init"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-excludeJQueryCompat="true"
  data-sap-ui-xx-waitForTheme="init"
></script>
<script id="myxmlview" type="text/xml">
  <mvc:View controllerName="my.demo.Controller"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <App>
      <Page
        showHeader="false"
        class="sapUiResponsiveContentPadding"
      >
        <Button
          text="Open Dialog"
          press=".onButtonPress"
        />
        <dependents>
          <SelectDialog id="selectDialog"
            initialFocus="SearchField"
            title="Select Items"
            showClearButton="true"
            rememberSelections="true"
            items="{ path: '/', key: 'title' }"
          >
            <StandardListItem title="{title}" />
          </SelectDialog>
        </dependents>
      </Page>
    </App>
  </mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>








API参考：
sap.m.SelectDialogInitialFocus

    

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.