火语言 RPA：用「模拟键盘按键」搞定页面输入框填写

一、案例说明

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

场景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