关于文本框value值读取机制的问题-油猴中文网

granded 发表于 2023-11-3 19:48:30

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

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

steven026 发表于 2023-11-3 19:48:31

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

granded 发表于 2023-11-3 19:50:03

@李恒道哥哥救我{:4_101:}

李恒道 发表于 2023-11-3 22:00:45

楼上正解

ray040237 发表于 2023-11-4 09:11:44

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

1.派发事件,这种方法适用于vue页面，和纯净的html页面；
```
let nputLabel = $("div"); //这里用的是jquery，也可以适用js，注意后面操作的元素都是dom对象，所以使用了jquery后需要下标转为dom
      inputLabel.value = "deal";
      inputLabel.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.dispatchEvent(new InputEvent("input"));//触发输入事件
```
3.react页面专属，因为react16内部定义了descript拦截value,所以派发事件，无法触发input所绑定的事件，需要重置输入状态；
```
let inputLabel = $("div"); //这里获取需要自动录入的input内容
      let lastValue = inputLabel.value;
      inputLabel.value = "deal";
      let event = new Event("input", { bubbles: true });
      //React15
      event.simulated = true;
      //React16 内部定义了descriptor拦截value，此处重置状态
      let tracker = inputLabel._valueTracker;
      if (tracker) {
         tracker.setValue(lastValue);
      }
      inputLabel.dispatchEvent(event);
```

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

granded 发表于 2023-11-5 09:42:59

谢谢哥哥们{:4_110:}

页: [1]

油猴中文网's Archiver

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