影刀RPA分享第20260311期|网页输入框不可输入了？教你一招无视 readonly 直接输入

有时候我们在填写网页表单时，会遇到某些输入框（如日期选择器、协议文本或特定数值框）被设置了 readonly 属性，导致无法直接打字输入。

这通常是前端为了规范输入格式而做的限制，但如果你确信需要手动修改，利用浏览器的 开发者工具 (DevTools) 配合一行简单的 JavaScript 就能轻松解锁。

核心原理：什么是 readonly？

在 HTML 中，readonly 是一个布尔属性。当它存在于 <input> 标签中时，用户可以看到该元素并使其获得焦点，但不能修改其内容。

代码示例：

<input type="text" value="只读内容" readonly>

我们要做的，就是通过 JavaScript 动态地从 DOM（文档对象模型）中移除这个“锁”。

操作步骤：三步解锁限制

1. 定位元素

首先，你需要找到那个“不听话”的输入框：

• 在目标输入框上 点击右键。

• 选择 “检查” (Inspect)。此时浏览器会打开开发者工具，并自动高亮显示该元素的 HTML 代码。

2. 编写并执行 JS 代码

function (element, input) {
    // 在此处编写您的Javascript代码
    // element表示选择的操作目标(HTML元素)
    // input表示输入的参数(字符串)
    element.removeAttribute("readonly");
    return null;
}

3. 直接输入

执行完代码后，你会发现输入框的光标变回了可编辑状态，此时直接键入内容即可。

💡 避坑指南（温情提示）

1. 后端校验： 即使你成功去掉了前端的 readonly 并提交了数据，有些严谨的系统会在后端进行二次校验。如果后端发现该字段不应被修改，可能会报错或忽略你的输入。

2. 联动逻辑： 很多 readonly 输入框绑定了复杂的 JavaScript 逻辑（比如点击后弹出选择器）。强制手动输入可能会导致页面上的其他关联数据（如隐藏的 ID 字段）没有同步更新，从而提交失败。

3. 临时性： 这种修改是临时的。如果你刷新了页面，所有的属性都会恢复原状。