一、问题描述
二、执行流程
三、问题原因
第一行 textarea 使用了“设置元素值”,然后第二行去操作“复选框”时,内容被清空,通常不是影刀软件的BUG,而是网页代码逻辑导致的。
核心原因: DOM 更新导致的事件重置
“设置元素值”的隐患:
当你使用“设置元素值”修改 textarea 时,虽然值填进去了,但网页的 JavaScript 可能并没有“感知”到这个变化(因为它没有监听到键盘敲击事件) 。此时,网页内部记录的“当前值”可能还是空的。
复选框的副作用:
当你操作复选框(勾选)时,这会触发页面的点击事件或状态变更事件。 很多现代网页(特别是使用 Vue、React 等框架开发的)在检测到页面状态变化(如表单某项被修改)时,会触发重新渲染或数据同步。
结果:
网页重新渲染时,发现 textarea 的“内部状态”是空的(因为之前的“设置元素值”没有更新内部状态),于是它把 textarea 界面上显示的内容重置回了空值。
四、解决方案
方式1: 使用【填写输入框】 指令 (推荐)
理由:它会模拟真实的键盘输入,能够触发网页的 oninput 等事件,让网页“知道”这里有了新内容,从而更新其内部状态。这样后续操作复选框时,网页就不会认为数据不一致而进行重置。
方式2:调整操作顺序
尝试先勾选复选框,再设置 Textarea 的值。
理由:如果复选框的操作确实会触发布局重绘或数据重置,那么在重置发生之后再填入内容,内容就不会被清空
方式3:在【设置元素值(Web) 指令 】后增加延时或触发事件
如果你必须使用“设置元素值”(例如为了速度),可以在设置完值之后,增加一个微小的延时(如 0.1秒),或者尝试点击一下页面空白处(失焦),强制网页刷新状态,然后再去操作复选框
五、补充知识
这两个指令虽然都能往框里填字,但实现方式完全不同:
| 指令 | 填写输入框(Web) | 设置元素值(Web) |
|---|---|---|
| 原理 | 模拟物理行为。它模拟人工键盘敲击,或者调用浏览器的输入法接口。 | 修改代码属性。它直接修改网页元素的 value 属性(即直接改代码里的值)。 |
| 速度 | 相对较慢(受打字速度限制)。 | 极快(瞬间完成)。 |
| 触发事件 | 能触发网页的键盘事件(如 onkeydown, oninput)。 | 通常不触发键盘事件,只改变值。 |
| 适用场景 | 需要触发网页实时校验、联想搜索、或者普通文本输入。 | 批量快速填写、或者某些模拟输入无效的顽固输入框。 |