在Enter和on按钮元素触发器表单上模拟一个Tab键按钮提交angularjs

时间:2015-09-22 05:14:56

标签: javascript jquery angularjs angularjs-directive

我有这个角度代码,我有一个表单,我希望点击输入,它模拟一个tab键,并专注于下一个输入。当它到达最后一个输入时,它会查找按钮元素然后触发表单的ng-submit但是由于某些原因,angularjs没有捕获我的触发器点击功能。有谁知道怎么做到这一点?这是我的jsfiddle http://jsfiddle.net/qujoy4sp/4/

这是我的指示.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但主要的是让它在按钮元素上提交表单。

2 个答案:

答案 0 :(得分:0)

您获得的System.setProperty("webdriver.chrome.driver", "<localpath of Chrome driver>"); WebDriver chromeobj = new ChormeDriver(); chromeobj.get("www.google.com"); 元素是.next(),而不是您所期望的<br>。所以请两次或更好地调用<label>:用CSS替换换行符。

此外,您应该致电.next()。我已经相应地更新了你的小提琴。

答案 1 :(得分:0)

您当前的代码正在选择代码,如果您向其添加另一个代码(),您将获得该代码。

最好是使用css替换标签上的标签

display:block;

使用css,

显示以下示例

http://jsfiddle.net/qd4kefsr/

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

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