4

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

简化的指令如下所示：

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 没有“焦点”方法。基本上，我需要一个有效的替代品？？？在我的代码中。

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

4

4 回答 4

5

您可以使用从 angular/jqLit​​e 对象（没有）[0]获取基础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/

于 2014-01-05T15:27:21.300 回答
3

element.next().focus()如果您有一个复杂的表单并且输入嵌套到不同的 div 中，则可能无法正常工作。我结束了这个指令的编写（这里我将重点放在 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
        }
      });
    }
  };
});
于 2016-05-23T03:34:56.470 回答
1
  1. 事件应该在 HTML 组件中(keypress) = "keyFocus($event)"

  2. 方法应该像.ts文件。

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

于 2017-11-18T12:54:45.640 回答
0

AngularJS 已经包含 jQuery 的轻量级版本，因此您也可以使用它... http://docs.angularjs.org/api/angular.element

你可以尝试这样的事情：

element.next().focus()

于 2013-07-30T16:07:20.457 回答