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

2026-01-23 90

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本案例针对自动化填写中输入框内容追加、JS清空无效等难题，通过模拟真实用户键盘操作（Ctrl+A全选+Delete删除），彻底清空输入框并绕过前端框架状态限制，确保内容准确写入，提升自动化稳定性。

一、案例说明

在自动化填写页面搜索框 / 输入框的场景中，常遇到输入框各类写入异常问题：
场景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