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

Question

我目前正在开发一个 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()新输入字段，但没有成功。

编辑：澄清一下，这个建议没有问题 - 只有在出现的新屏幕上没有自动对焦才是困扰我的地方。

Answer 1

请查看 sap.m.Input, it has a method focus 的 API 文档。您可以拨打：

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

将焦点设置到输入字段。

Answer 2

试试这个：

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()
  });
});

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

Answer 3

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

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

Answer 4

我没有遇到完全相同的问题，但是很相似。我的问题是在呈现视图时我需要关注建议输入。我的解决方案是将以下代码放入“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();
                        }
                    });
                }
            });

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

Answer 5

这是 "fix" 此行为的解决方法：https://jsbin.com/lukozaq

注 1： 上面的代码片段依赖于弹出窗口工作方式的内部实现。谨慎使用它，因为目前没有 public API 来访问相应的内部控件。

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

Setting focus to DOM Element, which can open the on screen keyboard on mobile device, doesn't work consistently across devices. Therefore, setting focus to those elements are disabled on mobile devices and the keyboard should be opened by the user explicitly.

该评论来自模块 sap.m.Dialog。在移动设备上，当用户单击源输入字段时，会打开一个拉伸的对话框 "popup"，它的子 header.

中有第二个输入字段

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

How to enable auto focus on SAPUI5 input suggestion field

sapui5