如何使用角度模拟Tab键按键

Question

我有兴趣做一个非常简单的自动标签功能.我想以编程方式为访问者按"标签".我似乎无法弄清楚如何在标准JS中实现这一点(即 - 不使用jQuery .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

我不认为这是可能的.看看这篇文章和这个问题:

请注意,手动触发事件不会生成与该事件关联的默认操作.例如,手动触发焦点事件不会导致元素获得焦点(必须使用其焦点方法),手动触发提交事件不提交表单(使用submit方法),手动触发键事件确实不会导致该字母出现在焦点文本输入中,并且在链接上手动触发单击事件不会导致链接被激活等.在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键击不可能做到这一点.