一、案例说明

在自动化填写页面搜索框 / 输入框的场景中，常遇到输入框各类写入异常问题：
场景1：直接写入无响应

问题表现：使用「输入框填写」组件无法将内容写入输入框；
核心原因：该组件仅直接修改输入框的 DOM 属性值，未触发网页内置的输入校验、内容监听等前端事件，导致页面未识别到输入操作；
解决策略：先用「获取 / 失去焦点」组件激活输入框，再通过「模拟键盘输入」组件完成内容填写；
参考案例：https://www.huoyuyan.com/community/detail.html?id=401

场景 2：内容追加写入（基础解决）

问题表现：新输入的内容会追加到输入框原有内容之后，无法覆盖旧内容；
核心原因：输入框默认采用内容追加逻辑；
解决策略：使用「网页注入 JS 脚本」组件强制清空输入框的 value 属性，清除原有内容；
参考案例（组件 8）：https://www.huoyuyan.com/community/detail.html?id=355

场景 3：JS 清空无效的极端追加场景

问题表现：即使通过 JS 脚本清空了输入框 value，后续输入仍会追加到上次内容之后；
核心原因：部分复杂输入框（如前端框架渲染的组件）会维护独立的内部状态，仅清空 value 属性无法同步这一状态；
解决策略：采用「模拟键盘按键删除」组件（如全选内容后删除、逐字符删除），复刻真实用户的键盘操作，彻底清空输入框并同步页面内部状态，保障后续写入稳定执行；

本案例是针对上述场景3的情况进行实操演示：

二、案例逻辑

核心思路：模拟真实用户的键盘操作，从物理层面清空输入框内容，绕过前端框架的隐藏校验与状态限制。
定位目标输入框的值，模拟键盘全选输入框内容（Ctrl+A），逐字符删除（Backspace/Delete），确认输入框彻底清空后，执行目标内容的写入操作。

三、操作细则

1、打开浏览器，初始化浏览器

2、浏览网页，输入网址URLhttps://www.yuque.com/login?register_with_scene=true&defaultType=org&register_from=official_website_top_button

3、获取/失去焦点，获取手机号输入框的焦点
目标元素：#ReactApp > div > div.lark.page-account.pc-web.lark-login > div > div:nth-child(1) > div > div > div > div.lark-form-content.form-pro > div > form > div:nth-child(1) > div > div > span > div > span > input

4、获取单元素信息/属性值，获取输入框的值
目标元素：input[data-testid="prefix-phone-input"]
属性名称：value

5、模拟键盘按键，Ctrl+A全选输入框的值

6、模拟键盘按键，删除（Delete）全选内容

7、模拟键盘输入，模拟键盘按键输入内容

8、鼠标拖拽元素，拖拽鼠标滑块元素
参考案例：https://www.huoyuyan.com/community/detail.html?id=417

案例分享: https://www.huoyuyan.com/share.html?key=eyJjb2RlIjoiWDd4YyIsImF1dG9Db2RlIjoiVHJ1ZSIsImtleSI6ImJiMmU0ZGI1YTQ3ZjQzMzdiNmYyMzlmZjFmYjZjYzEyIn0= 提取码: X7xc