一个奇怪元素，无法修改该元素的值

szzxc · 发表于 2023-7-11 20:08:15

document.querySelector('.ant-input').value = '222';
document.querySelector('#name').value = '222';

修改时不报错，前台页面输入框会变化222，但是查看该元素的值还是112233

document.querySelector('.ant-input').value 读取仍然112233
document.querySelector('#name').value 读取仍然112233

只有通过光标定位到该输入框，手工输入或粘贴才可以修改。
该元素有event，为invalid 但是删除enevt ，前台页面仍然手工录入没问题，通过document.querySelector('.ant-input').value = '222';赋值仍然是无法修改的。

李恒道 · 发表于 2023-7-11 20:08:16

楼上是正解
框架的代码只监听事件
修改数据之后不会触发事件
所以框架的数据无法更新
再次刷新又变成原值

江东小霸王 · 发表于 2023-7-12 07:34:34


document.querySelector('input.ant-input').setAttribute('value', 222)

szzxc · 发表于 2023-7-12 08:46:11

江东小霸王发表于 2023-7-12 07:34
[md]```javascript
document.querySelector('input.ant-input').setAttribute('value', 222)[/md]

这个确实能修改value的值，但是保存依然提示为空。而且页面的输入框不显示修改的内容222

ciyotk · 发表于 2023-7-12 08:50:43

贴HTML看看

steven026 · 发表于 2023-7-12 09:12:42

Object.values(document.querySelector('#name'))[1].onChange({target:{value:'222'}})

React框架特性，直接获取数据绑定函数调用就行了

具体原理可以看看
[油猴脚本开发指南]元素规则校验和检测的触发
https://bbs.tampermonkey.net.cn/thread-1250-1-1.html

szzxc · 发表于 2023-7-19 16:24:47

steven026 发表于 2023-7-12 09:12
[md]```js
Object.values(document.querySelector('#name'))[1].onChange({target:{value:'222'}})
```

确实有效。。这个就可以修改。。。我看那你那个链接的指南，之前也看到，但是看不明白要怎么写。

szzxc · 发表于 2023-7-19 16:26:58

李恒道发表于 2023-7-12 17:03
楼上是正解
框架的代码只监听事件
修改数据之后不会触发事件

之前输入框很多是这样的，像用户名，通过JS写入值后，一提交就返回用户名用空

李恒道 · 发表于 2023-7-19 16:32:03

szzxc 发表于 2023-7-19 16:26
之前输入框很多是这样的，像用户名，通过JS写入值后，一提交就返回用户名用空 ...

参考论坛的元素校验与触发

szzxc · 发表于 2023-7-20 08:50:01

李恒道发表于 2023-7-19 16:32
参考论坛的元素校验与触发

看过，就是看不太懂。。类似该主题的，steven026也是说看这个，但是之前就看过了。好像也不太好使。。还是他的 Object.values(document.querySelector('#name'))[1].onChange({target:{value:'222'}}) 就解决了

发表回复