Question

我网站的用户应该使用表单中的按钮输入一个简单的代码，然后点击Ok或按Enter键继续进行处理。

问题是输入键没有提交我的表单，正在执行从ng-click调用的其他方法。如何避免输入键调用ng-click方法？

myapp.js

var myApp = angular.module('myApp',[]);

myApp.controller('myformcontroller', ['$scope', function ($scope){
    // Procesing data from form.
    $scope.signin = function () {
    }
}]);

myApp.controller('mycontroller', ['$scope', function ($scope){
   $scope.do = function() {
       alert('ng-click pressed!');
   }
}]);

myform.html

<div ng-controller="myformcontroller">

    <form name="myForm"
          role="form" 
          ng-submit="signin()" 
          novalidate>

        <input type="text"/>

        <div ng-controller="mycontroller">
            <a href="javascript:void(0);" ng-click="do()">
                clickme!
            </a>
        </div>

        <button type="submit">Ok</button>
    </form>

</div>

按click me并在My Fiddle

后点击enter键

Answer 1

它没有阻止。您没有错过标准输入来冒泡正确处理的点击事件。如果没有输入，则默认情况下不提交表单。这不是一个有角度的问题。看看https://stackoverflow.com/a/477699/4573999

修改
基于评论的更详细解释。问题不在于提交元素。当然，你有一个按钮类型提交。对于表单内的其他元素，存在默认行为。对于input元素，enter键上的默认值是提交它所包围的表单。但对于锚标签，它不是。因为它不应该提供任何数据。为什么要在链接上提交表单？因此，在您的情况下，您应该通过调用适当的方法以编程方式提交表单。

myApp.controller('myformcontroller', ['$scope', function ($scope){ $scope.signin = function () { alert('submit!'); } }]); myApp.controller('mycontroller', ['$scope', function ($scope){ $scope.do = function() { alert('ng-click pressed!'); $scope.signin(); } }]);

检查更新的fiddle
如果您希望以通用方式获取此功能，则可以像How to programmatically submit a form with AngularJS一样解析ng-submit值

Answer 2

您可以使用jquery忽略html规则。首先在表单和按钮中添加id：

<form id="mydiv" name="myForm"
    role="form" 
    ng-submit="signin()" 
    novalidate>

    <div ng-controller="mycontroller">
       <a href="javascript:void(0);" ng-click="do()">
          <img src="img/a-letter.png" alt="">
        </a>
    </div>

    <button id="mydiv2" type="submit">Ok</button>
</form>

然后设置监听器进入：

$("#mydiv").keyup(function(event){
if(event.keyCode == 13){
    $("#mydiv2").click();
}
});

所以它并不优雅，但您可以通过模拟点击输入按下来提交表单。

AngularJS - ngClick阻止提交密钥操作

2 个答案: