如何在 SAPUI5 输入建议字段上启用自动对焦答案

【问题标题】：How to enable auto focus on SAPUI5 input suggestion field如何在 SAPUI5 输入建议字段上启用自动对焦
【发布时间】：2021-02-10 20:49:25
【问题描述】：

我目前正在开发一个 sapui5 移动应用程序，并且正在使用 sap.m.Input 并带有受以下模型约束的建议：

new Page('page', {
  showNavButton: true,
  content: [
    new sap.m.Input({
      id: "input",
      type: 'Text',
      showSuggestion: true,
      suggestionItemSelected: function(event) {
        event.getParameters().selectedItem.mProperties.text;
      },
      liveChange: function() {
        // some stuff
      }
    })
  ]
});

模型的创建和绑定如下：

var model = new sap.ui.model.json.JSONModel();
// model is filled
sap.ui.getCore().byId('input').setModel(model);
sap.ui.getCore().byId('input').bindAggregation('suggestionItems', '/', new sap.ui.core.Item({
    text: "{someField}"
}));

当我现在单击移动设备上的输入字段时，会打开一个带有新输入字段的新屏幕，用户必须再次手动聚焦，这对我来说似乎是一个可用性缺陷。在这个新屏幕上启用自动聚焦输入字段是否有很好的可能性，这样用户就不必再做一次了？还是可以在移动设备上完全禁用此屏幕？

sap.m.input 似乎没有自己的聚焦方法，或者至少我没有找到一种方法——我已经尝试在新的输入字段上使用 jquery 的.focus()，但没有成功。

编辑：为澄清起见，该建议没有问题 - 只有在出现的新屏幕上没有自动对焦才让我感到困扰。

【问题讨论】：

我在这里创建了一个新的问题报告：github.com/SAP/openui5/issues/410

标签： sapui5

【解决方案1】：

这是“修复”此行为的解决方法：https://jsbin.com/lukozaq

注意 1： 上面的 sn-p 依赖于弹出窗口工作方式的内部实现。请谨慎使用，因为目前没有公共 API 可以访问相应的内部控制。

注意 2： 我把词 fix 放在引号中，因为它似乎是用户必须明确点击第二个输入字段的预期行为，根据comment in the source code:

将焦点设置到 DOM 元素（可以在移动设备上打开屏幕键盘）在不同设备上的工作方式不一致。因此，为这些元素设置焦点在移动设备上禁用，并且键盘应由用户明确打开。

该评论来自模块sap.m.Dialog。在移动设备上，当用户单击源输入字段时，会以“弹出窗口”的形式打开一个拉伸对话框，该对话框的子标题中有第二个输入字段。

【讨论】：

【解决方案2】：

请查看sap.m.Input的API文档，它有一个方法focus。您可以致电：

this.byId("input").focus()

将焦点设置到输入字段中。

【讨论】：

谢谢 - 一定是错过了。不过this.byId("input").focus()对我不起作用。即使会，我也不知道应该在什么时候调用它，因为新出现的输入字段在应用程序启动时还没有出现。当带有新输入字段的弹出窗口打开时，是否会触发事件？或者我应该如何反应？
DOM 引用必须可用于设置焦点。您可以使用 onAfterRendering 生命周期挂钩来应用渲染后操作。
这对我不起作用，因为在那一刻没有触发 onAfterRendering。当我在浏览器的控制台中手动输入sap.ui.getCore().byId('id-of-my-input').focus() 时，focus() 也不起作用。

【解决方案3】：

试试这个：

jQuery.sap.delayedCall(0, this, function() {
      this.byId("input").focus()
});

关于如何检测用户何时按下输入字段：可能是这样的？唯一的问题是我认为您可能不知道显示的新输入字段的 id。

var domId = this.byId("input").getId();
$( "#"+domId  ).click(function() {
  jQuery.sap.delayedCall(0, this, function() {
          this.byId("input").focus()
  });
});

我很确定第一段代码是如何将焦点放在输入上。我不确定第二部分，但可以尝试一下。

【讨论】：

【解决方案4】：

在 onAfterRendering() 中执行以下操作..

onAfterRendering : function() {
                $('document').ready(function(){
                sap.ui.getCore().byId('input').focus();
                });
            }

【讨论】：

【解决方案5】：

我没有完全相同的问题，但它是相似的。我的问题是，当视图被渲染时，我需要专注于建议输入。我的解决方案是将以下代码放入“hanldeRouteMatched”函数中：

            var myInput = this.byId("inputName");
            var viewName = this.getView().getId();
            var selector1 = viewName + "--inputName-inner";
            var selector2 = viewName + "--inputName-popup-input-inner";
            jQuery.sap.delayedCall(1000, this, function() {
                myInput.focus();
                if($("#" + selector1)){
                    $("#" + selector1).click();
                    jQuery.sap.delayedCall(500, this, function() {
                        if($("#" + selector2)){
                            $("#" + selector2).focus();
                        }
                    });
                }
            });

如果您看到建议输入捕获了焦点，但之后它失去了它，或者它从未捕获它，请尝试增加 delayCalls 中的时间。所需时间取决于您的连接速度。

【讨论】：