Question

我正在使用AngularJS处理Web应用程序。

在表单中，客户端希望+键像Tab键一样工作。表单包含静态文本输入，提交输入和按钮。它还将包含动态添加的文本输入，使用ng-repeat添加。

我认为我可以通过捕获按键事件和更改键码来实现此目的，但这不起作用。

有什么想法吗？

Answer 1

您需要捕获按键事件，禁止它（停止传播，防止默认），然后发送新的自定义按键事件。

Answer 2

我想出了如何使用angular指令解决这个问题。将此指令放在元素上。在该元素中，它将为所有输入和按钮添加一个按键监听器;它甚至可以处理动态添加的元素！

app.directive('nspPlusAsTab', function() {
  function getNextTabbableElement(indexOfCurrentElement, tabbableElements) {
    var indexOfNextTabbableElement;
    var lastIndexInTabbableElements = tabbableElements.length - 1;

    if (indexOfCurrentElement === lastIndexInTabbableElements) {
      indexOfNextTabbableElement = 0;
    } else {
      indexOfNextTabbableElement = indexOfCurrentElement + 1;
    }

    var nextTabbableElement = tabbableElements[indexOfNextTabbableElement];

    if (nextTabbableElement.disabled) {
      nextTabbableElement = getNextTabbableElement(indexOfNextTabbableElement, tabbableElements);
    }

    return nextTabbableElement;
  }

  return {
    restrict: 'A',
    link: function(scope, element) {
      //use jQuery.on to attach a keypress event handler function to all current and future input or button elements
      element.on("keypress", "input, button", function(event) {
        var plusKeycode = 43;

        if (event.which === plusKeycode) {
          event.stopPropagation();
          event.preventDefault();

          var tabbableElements = element.find("input, button");
          var indexOfCurrentElement = tabbableElements.index(this);
          var nextTabbableElement = getNextTabbableElement(indexOfCurrentElement, tabbableElements);
          nextTabbableElement.focus();
        }
      });

    element.on("focus", "input", function(){
      this.select();
    });
    }
  };
});

Make + key使用AngularJS在表单中像Tab一样

2 个答案: