Tengo una etiqueta de entrada deshabilitada en la que la propiedad del cursor es texto;
<input type="text" value='1111' style='cursor:text' disabled>Cuando hago clic en esa entrada, quiero que se elimine el atributo deshabilitado. pero las cosas parecen no funcionar.
input.addEventListener('click', function () { input.disabled = false})Envuelva <input> en otro elemento y vincule el evento a eso. Agregue la propiedad CSS pointer-events: none a <input> para que <label> sea el único elemento que reconozca el clic o el evento del mouse (vea los comentarios de 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>¿Cómo funcionan los eventos de clic en el campo de entrada deshabilitado en javascript?
La especificación dice:
Un control de formulario que está deshabilitado debe evitar que los eventos de
clickque están en cola en el origen de la tarea de interacción del usuario se envíen al elemento.
Debido a que el elemento deshabilitado no recibe el evento de click , puede envolverlo en un elemento y agregar un oyente de evento de click a ese contenedor en su lugar:
Tenga en cuenta que ( como señaló Kaiido en un comentario ), se requiere deshabilitar los eventos de puntero en los elementos deshabilitados para que esto funcione de acuerdo con las especificaciones, usando la declaración de estilo
[disabled] { pointer-events: none; }
[disabled] { pointer-events: none; } <label> <input type="text" value='1111' disabled /> </label> <script type="module"> const label = document.querySelector('label'); const input = label.querySelector(':scope > input'); label.addEventListener('click', () => { input.disabled = false; input.focus(); }); </script>