How to enable auto focus on SAPUI5 input suggestion field

问题

I'm currently developing a sapui5 mobile application and am using an sap.m.Input with suggestions bound by a model like this:

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

The Model is created and bound like the following:

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

When I now click into the input field on a mobile device, kind of a new screen opens with a new input field, which the user has to manually focus again, what seems like a usability flaw to me. Is there a nice possibility to enable auto focusing the input field on this new screen, so that the user doesn't has to do it again? Or can this screen be disabled at all on mobile devices?

sap.m.input doesn't seem to have a own method for focusing, or at least I'm not finding one - I already tried using jquery's .focus() on the new input field, but without success.

edit: for clarification, the suggestion works troublefree - only the absence of the auto focus on the appearing new screen is what bothers me.

回答1:

Here is a workaround to "fix" this behavior: https://jsbin.com/lukozaq

Note 1: The above snippet relies on internal implementation of how the popup works. Use it with caution as there are currently no public APIs to access the corresponding internal controls.

Note 2: I put the word fix in quotes because it seems to be the intended behavior that the user has to click on the second input field explicitly, according to the 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.

That comment is from the module sap.m.Dialog. On a mobile device, when the user clicks on the source input field, a stretched Dialog opens up as a "popup" which has the second input field in its sub header.

回答2:

Please check the API documentation of sap.m.Input, it has a method focus. You can call:

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

to set the focus into the input field.

回答3:

Try this:

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

About how to detect when the user presses the input field: maybe something like this? Only problem is that I think you probably don't know the id of the new input field which is shown.

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

I am pretty sure that the first piece of code is how to put focus on an input. I'm not sure about the second part, but it's something to try.

回答4:

in onAfterRendering() do the below..

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

回答5:

I didn´t have the exactly same problem, but It was similiar. My problem was that I needed focus into suggestion input when the view had been rendered. My solution was to put following code into "hanldeRouteMatched" function:

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

If you see that suggestion input catch focus, but It lose it after, or It never catched it, try increasing the time in delayedCalls. The needed time depends on your connection speed.

I hope this help you.

+1 If it was useful.

回答6:

How to enable autofocus on SAPUI5 input suggestions field

--->Try this:

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

About how to detect when the user presses the input field: maybe something like this? Only problem is that I think you probably don't know the id of the new input field which is shown.

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

---->in onAfterRendering() do the below..

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

----->I didn´t have the exactly same problem, but It was similiar. My problem was that I needed focus into suggestion input when the view had been rendered. My solution was to put following code into "hanldeRouteMatched" function:

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

If you see that suggestion input catch focus, but It lose it after, or It never catch it, try increasing the time in delayed calls. The needed time depends on your connection speed.

来源：https://stackoverflow.com/questions/29755630/how-to-enable-auto-focus-on-sapui5-input-suggestion-field

标签

sapui5