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＆＃39; s .focus()了新输入字段，但没有成功。

编辑：为了澄清，该建议无故障 - 只有在出现的新屏幕上没有自动对焦才会让我感到困扰。

Answer 1

请查看sap.m.Input的API文档，其方法为focus。你可以打电话：

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（）中执行以下操作..

function Controller1($scope, $http) {
    var vm = this;

    vm.items = [{name: 'item1', data: 123}, {name: 'item2', data: 456}];

    var templateReplacement = '{{thing.';
    $http.get('controller1/template1.html')
        .then(function success(response) {
            var newHtml = response.data.replace(/{{item./g, templateReplacement);
            var repeaterElem = $('#repeater');

            $(repeaterElem[0]).html(newHtml);

            $compile(repeaterElem)($scope);
    }, function failure(reason) {
            console.log(reason);
    });
}

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中的时间。所需的时间取决于您的连接速度。

我希望这对你有所帮助。

+1如果它有用。

Answer 5

以下是解决方法＆＃34;修复＆＃34;这个行为：

applyInitialFocus: function(sourceInput) {
  const popup = sourceInput._oSuggestionPopup;
  if (popup && popup.getMetadata().getName().split(".").reverse()[0] === "Dialog") {
    const targetInput = popup/*Dialog*/.getCustomHeader().getContentMiddle()[0]; 
    popup.attachAfterOpen(() => targetInput.focus());
  }
},

工作示例：https://jsbin.com/lukozaq

注1：以上代码段依赖于弹出窗口工作原理的内部实现，可以在以后的版本中进行更改。请谨慎使用，因为目前没有公共API可以访问相应的内部控件。

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

将焦点设置为DOM元素，可以打开移动设备上的屏幕键盘，并不能跨设备一致地工作。因此，将焦点设置为这些元素在移动设备上已禁用，并且用户应明确打开键盘。

该评论来自模块 sap.m.Dialog 。在移动设备上，当用户点击源输入字段时，stretched Dialog会打开一个＆＃34;弹出窗口＆＃34;它的（自定义）标题中有第二个输入字段。

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

5 个答案: