js自动模拟用户键盘输入，自动触发输入事件，三种方法，适用vue,react网页

最新推荐文章于 2024-09-26 01:42:12 发布

粉面蛋子

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量1.4w

点赞数 13

分类专栏：脚本历程文章标签： javascript vue.js react.js

本文链接：https://blog.csdn.net/weixin_54051261/article/details/125752218

版权

脚本历程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue和React中模拟和派发事件的方法，包括使用jQuery操作DOM触发change事件，Vue和纯HTML页面的input事件派发，以及针对React16的特殊处理，解决React内部value拦截问题，确保输入事件的正确触发。

摘要由CSDN通过智能技术生成

1.派发事件,这种方法适用于vue页面，和纯净的html页面；

  let nputLabel = $("div"); //这里用的是jquery，也可以适用js，注意后面操作的元素都是dom对象，所以使用了jquery后需要下标转为dom
          inputLabel[0].value = "deal";
          inputLabel[0].dispatchEvent(
            new Event("change", {
              view: window,
              bubbles: true,
              cancelable: true,
            })
          );

2.简写派发事件，也仅适用vue页面和纯净的html页面；

    let inputLabel = $(".el-input-group__prepend+.el-input__inner");
        inputLabel.val(asin);//给input赋值
        inputLabel[0].dispatchEvent(new InputEvent("input"));//触发输入事件

3.react页面专属，因为react16内部定义了descript拦截value,所以派发事件，无法触发input所绑定的事件，需要重置输入状态；

let inputLabel = $("div"); //这里获取需要自动录入的input内容
          let lastValue = inputLabel[0].value;
          inputLabel[0].value = "deal";
          let event = new Event("input", { bubbles: true });
          //  React15
          event.simulated = true;
          //  React16 内部定义了descriptor拦截value，此处重置状态
          let tracker = inputLabel[0]._valueTracker;
          if (tracker) {
            tracker.setValue(lastValue);
          }
          inputLabel[0].dispatchEvent(event);