【问题标题】:Pressing Enter doesn't work with AngularJS按 Enter 不适用于 AngularJS
【发布时间】:2016-01-03 21:24:53
【问题描述】:

我在使用带有角度 js 登录表单的键盘上的“输入按钮”时遇到问题。我知道之前有人问过这个问题,但我相信我的问题有点不同,因为我尝试了几乎所有关于 stackoverflow 问题的内容。

所以,我只希望能够仅使用键盘上的 Enter 键按 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”,所以它就像: 亚马逊/bigboby

【问题讨论】:

  • 你能提供一个plunkr吗?
  • html 没有什么不寻常的地方可以阻止它。您确定问题不在于您的提交功能吗?创建一个演示来复制您的问题并提供更好的问题描述
  • 你的表单也应该有一个 name 用于角度表单指令
  • 您的控制台有任何错误吗?
  • 尝试将type 属性添加到您的&lt;button&gt; 标签:&lt;button type="button" class="close" data-close="alert"&gt;&lt;/button&gt;。我以前遇到过这样的问题,但我不太记得它的原因。我相信它与Angular如何检测提交按钮在表单上的位置有关。通过不指定您正在愚弄它的类型。我之前的经验是始终在按钮上使用type 属性(其他有效类型是“提交”和“重置”)。

标签: javascript angularjs forms enter ng-submit


【解决方案1】:

我很确定您的问题是由这个&lt;button&gt; 标签引起的:

<button class="close" data-close="alert"></button>

答案在documentation

您可以使用以下两种方式之一来指定提交表单时应调用的javascript方法:

ngSubmit 表单元素上的指令

ngClick 指令在第一个按钮或提交类型的输入字段 (input[type=submit])

注意关于它如何在第一个按钮上查找 ng-click 处理程序的注释。当您按 ENTER 提交表单时,Angular 会查看表单并看到该按钮。它将在该按钮上执行ng-click 处理程序(如果有的话)。

如果你在按钮上包含type 属性,你可以阻止它并让它找到实际的提交按钮:

<button type="button" class="close" data-close="alert"></button>

【讨论】:

  • 非常感谢,我想这是有道理的,如果表单中有多个按钮会混淆。所以只需输入“type="button"”就可以了。
猜你喜欢
  • 2017-04-18
  • 1970-01-01
  • 2012-10-22
  • 2015-08-23
  • 2018-07-28
  • 2013-10-09
  • 2017-07-26
  • 2016-10-16
  • 1970-01-01
相关资源
最近更新 更多