事件 – 如何使用角度模拟Tab键按键

发布时间：2020-12-17 17:31:02 所属栏目：安全来源：网络整理

导读：我有兴趣做一个非常简单的自动标签功能.我想以编程方式为访问者按“标签”.我似乎无法弄清楚如何在标准JS中实现这一点(即 – 不使用jQuery的.trigger()). 用法： input auto-tab =“3” directive('autoTab',[function () { return { restrict: "A",scope: f

我有兴趣做一个非常简单的自动标签功能.我想以编程方式为访问者按“标签”.我似乎无法弄清楚如何在标准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();
                    }
                });
            }
        }
    }])

解决方法

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

Note that manually firing an event does not generate the default
action associated with that event. For example,manually firing a
focus event does not cause the element to receive focus (you must use
its focus method for that),manually firing a submit event does not
submit a form (use the submit method),manually firing a key event
does not cause that letter to appear in a focused text input,and
manually firing a click event on a link does not cause the link to be
activated,etc. In the case of UI events,this is important for
security reasons,as it prevents scripts from simulating user actions
that interact with the browser itself.

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

app.directive('autoTabTo',[function () {
  return {
    restrict: "A",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键击不可能做到这一点.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!