如何使用“Enter”键提交SAPUI5 SimpleForm？

Question

我在 XML 视图中有一个 SimpleForm。我想捕获用户按下“输入”按钮的事件，当光标位于简单表单中的任何字段内时，以便我可以提交表单（实际上我将使用按下“输入”键触发将提交表单的 sap.m.Button 的新闻事件）。我搜索了文档但找不到解决方案。有什么想法吗？

Answer 1

您只需使用

onsapenter

事件即可。

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

oInput.onsapenter = ((oEvent) => {

    alert("onEnter");

});

Answer 2

您可以使用输入控件的

submit

事件：

<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>

当然，您需要在控制器上创建一个函数来处理登录（在本例中需要称为“登录”）...

Answer 3

我今天有同样的问题/要求。使用下面的代码，我可以采用两种模式将数据提交到控制器，即按“提交”按钮并再次按 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
}

Answer 4

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