温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How call a function by pressing enter key in password input field in Login view?
javascript sapui5

javascript - 如何通过在登录视图的密码输入字段中按Enter键来调用功能?

发布于 2020-04-16 13:29:42

我有一个登录视图。当我按下登录按钮时,我会调用handleFooterBarButtonPress功能。在密码字段中按Enter键时,如何管理Enter键动作来调用相同的功能?

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
        controllerName="view.login" xmlns:html="http://www.w3.org/1999/xhtml" >
    <Page title="WEBAPP">
        <content>

        <FlexBox
          alignItems="Center"
          justifyContent="Center">
          <items>
            <Image src="general/img/logo.png" width="{/widthL}"/>
          </items>
        </FlexBox>

        <FlexBox
          alignItems="Center"
          justifyContent="Center">
          <items>

            <l:Grid
            defaultSpan="L12 M12 S12"
            width="auto">
            <l:content>
              <f:Form id="loginForm"
                minWidth="1024"
                maxContainerCols="2"
                editable="true">
                <f:title>
                  <core:Title text="" />
                </f:title>
                <f:layout>
                  <f:ResponsiveGridLayout
                    labelSpanL="3"
                    labelSpanM="3"
                    emptySpanL="4"
                    emptySpanM="4"
                    columnsL="1"
                    columnsM="1" /> 
                </f:layout>
                <f:formContainers>
                  <f:FormContainer>
                    <f:formElements>
                      <f:FormElement label="Username">
                        <f:fields>
                          <Input id="id_inputUsername" />
                        </f:fields>
                      </f:FormElement>
                      <f:FormElement label="Password">
                        <f:fields>
                          <Input id="id_inputPassword" type="Password" />
                        </f:fields>
                      </f:FormElement>
                    </f:formElements>
                  </f:FormContainer>
                </f:formContainers>
              </f:Form>
            </l:content>
          </l:Grid>


          </items>
        </FlexBox>


        </content>
        <footer>
        <Bar>
         <contentRight>
            <Button id="idButtonLogin" text="Login" type="Emphasized" visible="true" press="handleFooterBarButtonPress" icon="sap-icon://accept" />
         </contentRight>
        </Bar>
        </footer>
    </Page>
</core:View>

查看更多

提问者
padibro
被浏览
58
2,067 2018-10-26 13:09

sap.m.Input控件上,输入会引发change事件。因此,您可以为此设置一个处理程序,该处理程序可以触发sap.m.Button控件上的press event *

视图:

<Input id="id_inputPassword"
  type="Password"
  change="onPasswordChange" />

...

<Button id="idButtonLogin"
  text="Login"
  type="Emphasized"
  visible="true"
  press="handleFooterBarButtonPress"
  icon="sap-icon://accept" />

控制器:

onPasswordChange : function(oEvent) {
  this.getView().byId("idButtonLogin").firePress();
},

handleFooterBarButtonPress : function(oEvent) {
  jQuery.sap.require("sap.m.MessageToast");
  sap.m.MessageToast.show("Login!");
}

是JSBin提供的现场示例

警告:firePress受保护,因此您可能需要做一些不同的事情