[英]How call a function by pressing enter key in password input field in Login view?
我有一个登录视图。 当我按下登录按钮时，我调用handleFooterBarButtonPress函数。 当我在密码字段中按回车键时，如何管理回车键操作以调用相同的功能？
<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>
刚刚试用 Code Snippet 新功能。
回答：
您可以附加 sap.m.Input 的 onsapenter 事件。
sap.ui.controller("test.controller", { onInit:function(){ var input = this.getView().byId("id_inputPassword"); input.onsapenter=(function(oEvent) { this.handeLogin(input.getValue()); }).bind(this); }, handleFooterBarButtonPress : function(oEvent) { this.handeLogin(this.getView().byId("id_inputPassword").getValue()); }, handeLogin:function(password) { alert("Hanlde Login "+password); } }); var oView = sap.ui.xmlview({ viewContent : jQuery("#view1").html() }); oView.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script> <script id="view1" type="sapui5/xmlview"> <mvc:View controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Input id="id_inputPassword" type="Password" /> <Button id="idButtonLogin" text="Login" type="Emphasized" visible="true" press="handleFooterBarButtonPress" icon="sap-icon://accept" /> </mvc:View> </script> <body class="sapUiBody" id="content" />
在您的输入中使用submit事件：
<Input id="id_inputPassword" type="Password" submit=".handleFooterBarButtonPress" />
当用户在输入上按下Enter键时会触发此事件。
尝试这个：
$('#id_inputPassword').on('keydown',function(e){
e.stopPropagation();
if (e.keyCode == 13)
{
$('#formLogin').submit();
}
});
由于您在多次触发事件时遇到问题，因此我添加了 e.stopPropagation，因此不会再触发事件。
sap.ui.getCore().byId("inputUserName").attachBrowserEvent('keyup', function(e) {
if (e.which == 13 || e.keyCode == 13) {
var userName = sap.ui.getCore().byId("inputUserName").getValue();
var password = sap.ui.getCore().byId("inputPassword").getValue();
if (userName.length == 0) {
sap.ui.getCore().byId('inputUserName').setValueState('Error');
sap.ui.getCore().byId('inputUserName').focus();
} else if (password.length == 0) {
sap.ui.getCore().byId('inputPassword').setValueState('Error');
sap.ui.getCore().byId('inputPassword').focus();
} else if (userName.length > 0 && password.length > 0) {
//YOUR LOGIC
}
}
});
//another way by using sap's default saponenter function
sap.ui.getCore().byId("inputPassword").onsapenter = function(e) {
var userName = sap.ui.getCore().byId("inputUserName").getValue();
var password = sap.ui.getCore().byId("inputPassword").getValue();
if (userName.length == 0) {
sap.ui.getCore().byId('inputUserName').setValueState('Error');
sap.ui.getCore().byId('inputUserName').focus();
} else if (password.length == 0) {
sap.ui.getCore().byId('inputPassword').setValueState('Error');
sap.ui.getCore().byId('inputPassword').focus();
} else if (userName.length > 0 && password.length > 0) {
//your logic
}
}
在sap.m.Input控件上，输入会导致触发change事件。 因此，您可以在其上设置一个处理程序，该处理程序可以在sap.m.Button控件上触发按下事件*。
看法：
<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!");
}
警告：firePress 受到保护，因此您可能想做一些不同的事情
您可以找到以下代码使其工作。
$('#idButtonLogin').bind('keydown', function(e) {
if (e.keyCode == 13) {
// Here you can call the function
}
});
如何在按回车键时执行 function<input> 场地？
[英]How can I execute a function on pressing the enter key in an <input> field?
在输入类型=“文本”中按Enter键后如何调用JavaScript函数？
[英]How to call a JavaScript function after pressing Enter key in Input type=“text”?
如何通过使用javascript在HTML中按Enter键来调用函数？
[英]How to call a function by pressing enter key in html using javascript?
异步 function 使用搜索按钮和在输入字段中按键盘上的“输入”键触发
[英]async function to trigger both with the search button and by pressing the "enter" key on the keyboard in the input field
按下回车键（输入时）后，可能不会提交表单而是调用其他函数？
[英]It is possible after pressing enter key (on input), form doesn´t submit but call some another function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.