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

我认为这是不可能的。查看this post和this SO question：

请注意，手动触发事件不会生成默认值与该事件相关的行动。例如，手动触发a 焦点事件不会导致元素获得焦点（必须使用它的焦点方法），手动触发提交事件不会提交表单（使用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"/>

工作演示here。

这不完全是你想要的，但我担心通过模拟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()可能会为您提供帮助。

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

3 个答案: