AngularJS：成功验证后移动到下一个表单输入元素

Question

我写了一个自定义指令来验证我的表单字段。当满足某些标准（即脏和有效）时，我想将焦点自动设置到下一个输入元素。这是我的用户的要求，以便他们可以最有效地移动表单。

简化指​​令如下：

directive('custom', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     require: ['ngModel', '^ngController'], 
     link: function(scope, element, attrs, ctrls) { 
      var model=ctrls[0], form=ctrls[1]; 

      scope.next = function(){ 
       return model.$valid 
      } 

      scope.$watch(scope.next, function(newValue, oldValue){ 
       if (newValue && model.$dirty){ 
        ??? 
       } 
      }) 

现在我的问题是：我如何识别 - 通过tabindex属性 下一个输入元素（这是下一个兄弟）或可能 - 和重点它不使用jquery它 ？

对我来说，目前还不清楚，如何从没有Jquery的可用“范围”或“元素”属性中获取下一个输入元素;而JQlite不具备“重点”方法。基本上，我需要一个替代工作？在我的代码中。

任何帮助，高度赞赏。由于 克林斯曼

Answer 1

您可以使用[0]得到根本input元件与（具有focus()功能） angular/jqLit​​e对象（不会）。如果你有一个复杂的形式和输入嵌套到不同的div

app.directive('custom', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     require: ['ngModel'], 
     link: function(scope, element, attrs, ctrls) { 
      var model=ctrls[0], form=ctrls[1]; 

      scope.next = function(){ 
       return model.$valid; 
      } 

      scope.$watch(scope.next, function(newValue, oldValue){ 
       if (newValue && model.$dirty) 
       { 
        var nextinput = element.next('input'); 
        if (nextinput.length === 1) 
        { 
         nextinput[0].focus(); 
        } 
       } 
      }) 
     } 
    } 
}]) 

http://jsfiddle.net/Y2XLA/

Answer 2

AngularJS已经包含的jQuery的简易版本，所以你可以也使用它... http://docs.angularjs.org/api/angular.element

你可以尝试这样的事：

element.next（）。焦点（）

Answer 3

element.next().focus()可能无法正常工作。 最后我写这个指令（在这里我将焦点移上输入，但可以适用于任何事件）：

.directive('enterToTab', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var procAttr = 'data-ett-processed'; 

     $timeout(function() { // Use $timeout to run the directive when the DOM is fully rendered 
     var formElements = element[0].querySelectorAll('input:not([' + procAttr + '="true"]), select:not([' + procAttr + '="true"]), textarea:not([' + procAttr + '="true"])'); 

     // Run through all elements in form 
     var formElementsLength = formElements.length; 
     for (var i = 0; i < formElementsLength; i++) {   // Add tabindex attribute 
      formElements[i].setAttribute('tabindex', i + 1); 

      // Go to next element on Enter key press 
      formElements[i].addEventListener('keypress', function(event) { 
      if (event.keyCode === 13) { // Enter 
       // Prevent Angular from validating all the fields and submitting 
       if (event.target.tagName !== 'TEXTAREA') { // Not on textarea, otherwise not possible to add new line 
       event.stopPropagation(); 
       event.preventDefault(); 
       } 

       var nextIndex = parseInt(event.target.getAttribute('tabindex')) + 1; 

       // Move focus to next element 
       // TODO: find next visible element 
       var nextElem = element[0].querySelector('[tabIndex="' + (nextIndex) + '"]'); 

       if (nextElem) { 
       nextElem.focus(); 
       } 
      } 
      }); 
      formElements[i].setAttribute(procAttr, true); // Add attribute to prevent adding 2 listeners on same element 
     } 
     }); 
    } 
    }; 
}); 

Answer 4

1. 事件应该是在HTML组件(keypress) = "keyFocus($event)"

2. 方法shoulb像.ts文件。

   keyFocus(input1){ input1.srcElement.nextElementSibling.focus(); }