Quiero un elemento HTML <input type="text"> en el que se deba hacer clic antes de poder editarlo. En la misma línea de cómo, en Windows o Mac OS Finder, debe hacer clic en un nombre de archivo antes de que se vuelva editable.

Al principio intenté configurar <input> en disabled y tener JavaScript que lo "habilita" al hacer clic. Esto hizo exactamente lo que quería en Chrome, pero no funcionó en Firefox, porque en Firefox aparentemente deshabilitarlo también elimina su capacidad de reaccionar a los clics.

¿Cómo obtengo este comportamiento de una manera que funcione bien en los navegadores modernos?

0
Ascendant 1 may. 2020 a las 13:42

2 respuestas

Puede escuchar en el div padre y verificar si se hace clic en la entrada y luego habilitarla.

La respuesta actualizada también funciona en Firefox.

function enableInput() {
		if(event.target.id == 'text-input-overlay') {
			event.target.style.display = "none";
			document.getElementById("text-input").disabled = false;
		}
	}
<html>
<body>
<div style="position:relative;" id="container" onclick="enableInput()">
  <label for="text-input">Input: </label>
  <input id="text-input" type="text" disabled />
  <div id="text-input-overlay" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</div>
</body>
</html>
1
Hamza Arshad 1 may. 2020 a las 11:01

Puede restablecer los estilos de entrada predeterminados con CSS para que se vea como un texto / elemento normal. Luego use los eventos de enfoque y desenfoque para alternar.

const input = document.querySelector('input[type="text"]');

input.addEventListener('focus', (event) => {
  event.target.classList.remove('disabled');    
});

input.addEventListener('blur', (event) => {
  event.target.classList.add('disabled');     
});
.disabled {
  border: none;
  background: #ccc;
}
<input id="text-input" type="text" class="disabled" value="Click Me" />
0
KRRISH 1 may. 2020 a las 11:09