React输入框经F12移除disabled/readOnly后仍无法输入的问题

这种情况我碰到过好几次，大概率是前端框架的数据驱动机制或者额外的事件拦截在搞鬼，手动修改DOM属性根本绕不过去，具体可以从这几个方向排查：

1. 优先排查前端框架的状态绑定 #

如果你用了 Vue、React 这类数据驱动的框架，输入框的 readonly/disabled 属性肯定是和某个状态变量绑定的（比如 Vue 里的 :readonly="isInputLocked"，React 里的 readOnly={isLocked}）。你手动在控制台删掉DOM属性后，框架的内部状态还是原来的 true，要么会在下一次渲染时把属性加回去，要么框架会直接忽略DOM的手动修改，因为它只认自己管理的状态。

解决办法：找到对应组件里控制这个属性的状态变量，把它改成 false——比如在Vue开发者工具里直接修改isInputLocked的值，或者在React DevTools里调整状态，这样输入框才会真正变成可编辑状态。

2. 检查是否有事件拦截阻止输入 #

有些页面会给输入框绑定 keydown、keypress 这类事件，并且在事件回调里用 event.preventDefault() 或者 return false 阻止了输入行为。哪怕你去掉了readonly/disabled，输入事件还是会被拦截，自然没法输入内容。

排查步骤：

• 打开浏览器控制台的「Elements」面板，选中这个输入框
• 切换到「Event Listeners」标签，查看有没有绑定 keydown、keypress、input 这类事件
• 找到可疑的事件监听，右键选择「Remove」移除它，再试试能不能输入

3. 确认输入框没有被遮挡 #

还有一种少见但可能的情况：输入框上面有一个透明的元素（比如z-index更高的div），看起来你点击的是输入框，但实际触发的是上层元素的事件，导致输入无效。

你可以在「Elements」面板里hover这个输入框，看看高亮的范围是不是和视觉上的输入框一致；或者直接临时修改上层元素的z-index为负数，再测试输入。

内容的提问来源于stack exchange，提问作者jiahang su