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

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

<input class="ant-input xx-20" placeholder="请输入数据" maxlength="300" type="text" id="name" value="112233">

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

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

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

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

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

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

贴HTML看看

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

```js
Object.values(document.querySelector('#name')).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
```js
Object.values(document.querySelector('#name')).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')).onChange({target:{value:'222'}}) 就解决了
页: [1] 2
查看完整版本: 一个奇怪元素，无法修改该元素的值