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的情况下从可用的“scope”或“element”属性获取下一个输入元素;而JQlite没有“焦点”方法。基本上，我需要一个有效的替代品???在我的代码中。

非常感谢任何帮助。谢谢尔根

Answer 1

您可以使用[0]从angular / jqLite对象（不是）获取基础input元素（具有focus()函数）。

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

如果您有复杂的表单并且输入嵌套到不同的div中，则

element.next().focus()可能不起作用。我结束了这个指令的编写（这里我将重点放在Enter上，但可以适应任何事件）：

.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 3

事件应位于HTML组件(keypress) = "keyFocus($event)"
方法应该像.ts文件一样。

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

Answer 4

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

您可以尝试这样的事情：

element.next（）。对焦（）

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

4 个答案: