在Enter和按钮元素触发表单上模拟Tab键按下提交angularjs

Question

我有这个角度代码，据此我有一个表格，我想在输入时被单击，它模拟了一个选项卡按键并专注于下一个输入。 当到达最后一个输入时，它会查找button元素，然后以以下形式触发ng-submit。但是由于某些原因，angularjs无法捕获我的触发器单击功能。 有谁知道如何做到这一点？ 这是我的jsfiddle http://jsfiddle.net/qujoy4sp/4/

这是我的directive.js

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            var keyCode = event.which || event.keyCode;
      $timeout(function() {

        if(attrs.myEnter!= "undefined") {
          event.preventDefault();
          var elementToFocus = element.parent().next().find('button');
            angular.element( elementToFocus[0]).triggerHandler('click');

        } else {
          if (keyCode === 13) {
            event.preventDefault();
            var elementToFocus = element.parent().next().find('input');
            if(angular.isDefined(elementToFocus)) {
              elementToFocus[0].focus();
            }
          }
        }   
      })
        });
    };
});


app.directive('errorPopup', function($ionicPopup) {
  return {
    restrict: 'EA',
    scope: {data: '=errorPopup'},
    controller: function($scope, $rootScope) {
    },
    link : function(scope, element, attrs, ngModel) {
      element.bind("submit", function() {

        switch(attrs.errorPopup) {
          case 'loginData':
            if(!scope.data.orgCode.$valid) { 
              alert("code is needed")

            }
            else if(!scope.data.email.$valid || !scope.data.email.$error) { 
              alert("email is needed")
            }
            else if(!scope.data.password.$valid) { 
              alert("password is needed")
            }
            break;
        } 
      });
    }
  }
})

我的login.html

<body ng-app="ap" ng-controller="con"> 
    <div scroll="true">
      <form name="loginData" class="container ng-scope ng-invalid ng-pristine ng-invalid-required" error-popup="loginData" ng-submit= "loginData.$valid && doLogin(loginData)" novalidate>
        <div class= "list list-inset login-form">

          <label class="item item-input item-icon-left">
           <i class="fa fa-building"></i>
            <input type="text" name="orgCode" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.orgCode" placeholder="Organization Code" my-enter="undefined" required>
          </label>

          <label class="item item-input item-icon-left">
            <i class="fa fa-envelope"></i> 
            <input type="email" name="email" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required ng-valid-email" ng-model="user.email" placeholder="Email Address" my-enter="undefined" required>
          </label>

          <label class="item item-input item-icon-left">
            <i class="fa fa-key"></i>
            <input type="Password" name="password" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required ng-invalid-minlength" ng-model="user.password" placeholder="Your Password" ng-minlength="8" my-enter="submitData" required>
          </label>
          <div class="login-btn">
            <button class="button button-block button-positive" type="submit" ng-disabled="submitted">Log in</button>
          </div>
        </div>
      </form>
    </div>
</body>

我有一些错误检查要完成，我想在表单提交时将其删除，因此另一个指令称为errorPopup，但主要是要使其在按钮元素上提交表单。

Answer 1

您得到的.next()元素是一个<br> ，而不是您期望的<label> 。 因此，请两次调用.next() ，或者更好：将换行符替换为CSS。

另外，您可能应该调用elementToFocus[0].focus(); 。 我已经相应地更新了您的小提琴。

Answer 2

您当前的代码正在选择标签，如果您向其添加另一个next（），您将获得标签。

最好是使用CSS取代
标签，在标签上

display:block;

以下示例使用css显示，

http://jsfiddle.net/qd4kefsr/

在此示例中，我删除了
标签，并使用CSS执行此换行符。

随意使用您喜欢的解决方案的任何版本

在Enter和按钮元素触发表单上模拟Tab键按下提交angularjs

问题描述

2 个解决方案

解决方案1
0 2015-09-22 06:39:30

解决方案2
0 2015-09-22 11:36:40

在Enter和按钮元素触发表单上模拟Tab键按下提交angularjs

问题描述

2 个解决方案

解决方案1 0 2015-09-22 06:39:30

解决方案2 0 2015-09-22 11:36:40

解决方案1
0 2015-09-22 06:39:30

解决方案2
0 2015-09-22 11:36:40