events - 如何用角度模拟选项卡按键

Question

我有兴趣做一个非常简单的自动标签功能。我想以编程方式为访客按下“标签”。我似乎无法弄清楚如何在标准 JS 中实现这一点（即 - 不使用 jQuery's .trigger()）。

用法：<input auto-tab="3">

directive('autoTab', [function () {
        return {
            restrict: "A",
            scope: false,
            link: function (scope, el, attrs) {
                el.bind('keyup', function () {
                    if (el.val().length >= attrs.autoTab) {
                        //document.dispatchEvent();
                    }
                });
            }
        }
    }])

Answer 1

我不认为这是可能的。查看这篇文章和这个 SO 问题：

请注意，手动触发事件不会生成与该事件关联的默认操作。例如，手动触发焦点事件不会导致元素接收焦点（您必须使用它的焦点方法），手动触发提交事件不会提交表单（使用提交方法），手动触发键事件会不会导致该字母出现在焦点文本输入中，并且在链接上手动触发点击事件不会导致链接被激活等。在 UI 事件的情况下，出于安全原因，这很重要，因为它会阻止脚本通过模拟与浏览器本身交互的用户操作。

您可以尝试不同的方法：更改您的指令，以便它接收接下来应该关注的元素的 id：

app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
      el.bind('keyup', function(e) {
        if (this.value.length === this.maxLength) {
          var element = document.getElementById(attrs.autoTabTo);
          if (element)
            element.focus();
        }
      });
    }
  }
}]);

然后你可以像这样使用它：

<input type="text" id="input1" auto-tab-to="input2" maxlength="5"/>
<input type="text" id="input2" auto-tab-to="input1" maxlength="3"/>

工作演示在这里。

这不完全是您想要的，但恐怕无法通过模拟 TAB 击键来做到这一点。

Answer 2

我认为这个更好，无需提及输入元素的 id

app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
    el.bind('keyup', function(e) {
       if (this.value.length === this.maxLength) {
                 var inputs = $(this).closest('form').find(':input');
                 inputs.eq( inputs.index(this)+ 1 ).focus();
        }
      });
    }
   }
}]);

Answer 3

根据您需要的浏览器支持程度，dispatchEvent()可能会为您解决问题。