How to submit a SAPUI5 SimpleForm using the "Enter" key?

Question

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?

Solution 1

You can just use the onsapenter event.

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

oInput.onsapenter = ((oEvent) => {

    alert("onEnter");

});

Solution 2

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')...