关于文本框value值读取机制的问题

granded

目前在开发一个脚本需要填写一个查询表单，在一个文本框种填写相应的信息后点击提交后反馈数据。我用query定位到此元素后直接更改value值后可以在网页上看到值已被修改，但是提交的表单信息还是原来的旧值。也就是说是否是onchange类的事件的潜在影响，能科普下这类机制吗？

steven026

[油猴脚本开发指南]元素规则校验和检测的触发
https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
(出处: 油猴中文网)

granded

@李恒道  哥哥救我

李恒道

楼上正解

ray040237

本帖最后由 ray040237 于 2023-11-4 09:14 编辑

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);

搬运来自：https://blog.csdn.net/weixin_54051261/article/details/125752218

granded

谢谢哥哥们