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

Question

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

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

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

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

Answer 1

将 包装<input>在另一个元素中并将事件绑定到该元素。添加 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>