I have a SimpleForm inside a XML view. I would like to capture the event of the user pressing the 'enter' button, when the cursor is inside any of the fields in the Simple Form so that I can submit the form (actually I will use this pressing of the 'enter' key to fire the press event of a sap.m.Button that will submit the form). I searched the documentation but could not find a solution. Any ideas?

I have a SimpleForm inside a XML view. I would like to capture the event of the user pressing the 'enter' button, when the cursor is inside any of the fields in the Simple Form so that I can submit the form (actually I will use this pressing of the 'enter' key to fire the press event of a sap.m.Button that will submit the form). I searched the documentation but could not find a solution. Any ideas?

• javascript
• forms
• sapui5

• See sap munity discussion forum : archive.sap./discussions/thread/3651422 – Khurshid Ansari Commented Feb 16, 2018 at 12:35

4 Answers 4

You can just use the onsapenter event.

const oInput = new sap.m.Input();

oInput.onsapenter = ((oEvent) => {

    alert("onEnter");

});

You can use the submit event of the input control:

<f:SimpleForm
        id="loginForm"
        width="300px"
        maxContainerCols="1"
        editable="true"
        layout="ResponsiveGridLayout"
        class="editableForm">
    <f:content>
        <l:VerticalLayout>
            <Input id="Username" value="{Model>/username}" submit="login"/>
            <Input id="Password" type="Password" value="{Model>/password}" submit="login"/>
            <Toolbar>
                <ToolbarSpacer/>
                <Button icon="sap-icon://initiative" text="{i18n>LoginButtonText}" type="Emphasized" press="login"/>
                <ToolbarSpacer/>
            </Toolbar>
        </l:VerticalLayout>

    </f:content>
</f:SimpleForm>

Of course you need to create a function on your controller to handle the login (in this case needs to be called 'login')...

I had the same issue/ requirement today. With below code I was able to adopt 2 mode of submitting my data to controller i.e. On pressing Submit button and another pressing enter:

*.view.xml

<form:SimpleForm id="simpleFormId" layout="ResponsiveGridLayout">
   <form:content>
      <Label id="orderIdlabelId" text="Order ID" design="Bold"/>
      <Input id="orderIdInputId" placeholder="Enter Order ID" value="" width="auto" change="getOrderDetailsByID"/>
      <Button id="orderIdButtonId" text="Search Order" press="getOrderDetailsByID"/>
   </form:content>
</form:SimpleForm>

*.controller.js

getOrderDetailsByID: function () {
   // My Actual requirement implementation
}

onAfterRendering: function() {
           var self = this;
           jQuery("input").on("keydown",
             function(evt) {
               if (evt.keyCode == 13) {
                 evt.preventDefault();
                 self.doStuff(); //your code
               }
             });
    },