How call a function by pressing enter key in password input field in Login view?

发布于 2020-04-16 11:56:59

I have a login view. When I press login button I call handleFooterBarButtonPress function. How can I manage the enter-key action to call the same function when I press enter when I am in password field?

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

2,067 2018-10-26 13:09

On an sap.m.Input control, enter causes the change event to be fired. So you can set a handler on that, and that handler can fire the press event* on the sap.m.Button control.

View:

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

...

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

Controller:

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

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

Here's a live example courtesy of JSBin.

warning: firePress is protected, so you may want to do something different

padibro 2014-09-23 16:08:11

it work, but I have the same problem I have explained below: when I press Enter key I have double execution of code!!

Haojie 2014-09-23 16:14:11

Hi qmacro, your code will trigger Login event handler when the input is lost focus.

padibro 2014-09-23 16:27:07

Sorry qmacro. It work! ;) But why if i use "attachBrowserEvent" the function associated fire twice? Thankyou!

qmacro 2014-09-23 16:38:36

Allen, this is true, but also perhaps what is wanted in this case.

Haojie 2014-09-23 16:56:45

qmacro, it will result in unexpected login issue. please see my answer.

Related issues

Getting .json is not a function on Promise.all w/fetch

Javascript for loop only giving one output

find array value that index matches another array values

React

Communication between two components using ReactJS

Figma Plugin: callback on file updated

indexof() partial match issue

React useState hook and submit in multi step form

How do i get this firebase data to use it outside the loop?

How to define a font size that scales with browser zoom level?