使用AngularJS让+键像Tab键一样在表单中工作

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();
    });
    }
  };
});