按 Enter 键不适用于 AngularJS
Pressing Enter doesn't work with AngularJS
我在使用带有 angular js 登录表单的键盘上的 'enter button' 时遇到问题。我知道之前有人问过这个问题,但我相信我的问题有点不同,因为我尝试了几乎所有写在 Whosebug 问题上的东西。
所以,我只想使用键盘上的 Enter 键按下回车键并提交表单。
这里是登录名html:
<!-- BEGIN LOGIN FORM -->
<form ng-submit="loginCtrl.login()" class="login-form">
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Company/username"
ng-model="loginCtrl.username" name="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password"
ng-model="loginCtrl.password" name="password"/>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-success uppercase" value="Login">
</div>
</form>
<!-- END LOGIN FORM -->
这是我的登录信息:
self.login = function() {
var result = self.username.split("/");
var account = result[0];
var userId = result[1];
UserService.login(userId, self.password,account).then(function(user) {
self.userAccount = user;
$state.go('home');
}, function(err) {
alert("Authentication failure: Please check your credentials. ")
});
我得到的用户名是 "companyName/Username" 所以它是这样的:
amazon/bigboby
我很确定你的问题是由这个 <button>
标签引起的:
<button class="close" data-close="alert"></button>
答案在documentation:
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
ngSubmit
directive on the form element
ngClick
directive on the first button or input field of type submit (input[type=submit])
请注意有关它如何在第一个按钮上查找 ng-click 处理程序的评论。当您按 ENTER 提交表单时,Angular 查看表单并看到该按钮。它将在该按钮上执行 ng-click
处理程序(如果有的话)。
如果您在按钮上包含 type
属性,您可以阻止它并让它找到实际的提交按钮:
<button type="button" class="close" data-close="alert"></button>
我在使用带有 angular js 登录表单的键盘上的 'enter button' 时遇到问题。我知道之前有人问过这个问题,但我相信我的问题有点不同,因为我尝试了几乎所有写在 Whosebug 问题上的东西。
所以,我只想使用键盘上的 Enter 键按下回车键并提交表单。
这里是登录名html:
<!-- BEGIN LOGIN FORM -->
<form ng-submit="loginCtrl.login()" class="login-form">
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Company/username"
ng-model="loginCtrl.username" name="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password"
ng-model="loginCtrl.password" name="password"/>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-success uppercase" value="Login">
</div>
</form>
<!-- END LOGIN FORM -->
这是我的登录信息:
self.login = function() {
var result = self.username.split("/");
var account = result[0];
var userId = result[1];
UserService.login(userId, self.password,account).then(function(user) {
self.userAccount = user;
$state.go('home');
}, function(err) {
alert("Authentication failure: Please check your credentials. ")
});
我得到的用户名是 "companyName/Username" 所以它是这样的: amazon/bigboby
我很确定你的问题是由这个 <button>
标签引起的:
<button class="close" data-close="alert"></button>
答案在documentation:
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
ngSubmit
directive on the form element
ngClick
directive on the first button or input field of type submit (input[type=submit])
请注意有关它如何在第一个按钮上查找 ng-click 处理程序的评论。当您按 ENTER 提交表单时,Angular 查看表单并看到该按钮。它将在该按钮上执行 ng-click
处理程序(如果有的话)。
如果您在按钮上包含 type
属性,您可以阻止它并让它找到实际的提交按钮:
<button type="button" class="close" data-close="alert"></button>