JavaScript中禁用输入框点击事件失效，如何移除disabled属性？

核心原因 #

处于disabled状态的表单元素不会触发任何鼠标事件——哪怕手动设置了cursor:text，浏览器也会拦截所有点击、鼠标移入等交互事件，直接绑定在input上的click事件根本不会执行。

解决方案一：父元素代理事件 #

给input套一个父容器，将点击事件绑定在父容器上，通过父容器操作input的disabled属性：

<!-- 用div包裹input，设置cursor:text让鼠标显示文本光标 -->
<div style="display: inline-block; cursor: text;">
  <input type="text" value='1111' disabled>
</div>

const wrapper = document.querySelector('div');
const input = document.querySelector('input');

wrapper.addEventListener('click', () => {
  input.disabled = false;
  input.focus(); // 可选：点击后自动聚焦输入框，提升交互体验
});

解决方案二：用readonly替代disabled #

如果不需要严格的原生disabled样式，可使用readonly属性代替disabled——readonly状态的元素允许触发鼠标事件，同时默认禁止用户输入：

<input type="text" value='1111' style='cursor:text;' readonly>

const input = document.querySelector('input');

input.addEventListener('click', () => {
  input.readOnly = false;
});

方案对比 #

• 方案一：完全保留原生disabled的视觉效果，通过事件代理实现需求，适合需要严格遵循原生禁用样式的场景。
• 方案二：无需额外DOM元素，但需自行调整样式（若要和disabled外观一致），适合轻量化场景。

内容的提问来源于stack exchange，提问作者Shihab Haque