javascript - 单击事件如何在 JavaScript 中禁用的输入字段上工作？

Question

我有一个禁用的输入标记，其中光标属性是文本；

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

当我单击该输入时，我希望删除禁用的属性。但事情似乎不起作用。

input.addEventListener('click', function () {
input.disabled = false})

Answer 1

包裹<input>在另一个元素中并将事件绑定(bind)到该元素。添加 CSS 属性 pointer-events: none至<input>这样<label>是识别点击或鼠标事件的唯一元素(请参阅 Kaiido 的评论)。

document.querySelector('label').onclick = e => {
  const input = e.currentTarget.firstElementChild;
  input.disabled = false;
  input.style.pointerEvents = 'auto';
}

<label style='cursor: not-allowed'>
  <input type='text' style='cursor: text; pointer-events: none' value='Click to enable' disabled>
</label>