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

【问题标题】：Simulate a Tab keypress on Enter and on button element trigger form submit angularjs在 Enter 和按钮元素触发表单上模拟 Tab 按键提交 angularjs
【发布时间】：2015-09-22 05:14:56
【问题描述】：

我有这个角代码，我有一个表单，我希望在单击输入时，它模拟一个选项卡按键并专注于下一个输入。当它到达最后一个输入时，它会查找按钮元素，然后触发表单的 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;
        } 
      });
    }
  }
})

我的登录.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>

我有一些错误检查要做，我想在表单提交时对其进行 d，因此另一个指令称为 errorPopup 但主要是让它在按钮元素上提交表单。

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

您得到的.next() 元素是<br>，而不是您所期望的<label>。所以调用.next() 两次，或者更好的是：用 CSS 替换换行符。

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

【讨论】：

【解决方案2】：

您当前的代码正在选择标签，如果您添加另一个 next() 到它，您将获得标签。

最好是用css来替换
标签，放在你的label标签上

display:block;

下面的例子是用css展示的，

http://jsfiddle.net/qd4kefsr/

在这个例子中，我删除了
标签并使用 css 执行了这个换行符。

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

【讨论】：