Cuando hago clic en la entrada de búsqueda, funciona como se desea.
Pero cuando vuelvo a hacer clic en la entrada de búsqueda, se invierte el efecto del primer clic.
Debería revertir el efecto del primer clic cuando hago clic fuera de la entrada de búsqueda.
Aquí está mi código:
function active() { let body = document.body; let inp = document.getElementById("inpt") body.classList.toggle("bg") inp.classList.toggle("iwidth") } input { outline: none; width: 150px; padding: 2px; } .iwidth { width: 300px; } .bg { background: rgba(0, 0, 0, 0.8); transition: 300ms; } <input type="search" name="" id="inpt" onclick="active()">En lugar de usar toggle() , use add() y remove() para que cuando haga clic dos veces en el elemento de input , el foco no se apague
Agregue esto a su código js . Si hizo clic en cualquier elemento que no es el elemento de input , las clases se eliminan y vuelve a la normalidad
document.addEventListener("click", function (e) { if (e.target.id != "inpt") { inactive(); } })Código completo:
function active() { let body = document.body; let inp = document.getElementById("inpt") body.classList.add("bg") inp.classList.add("iwidth") } function inactive() { let body = document.body; let inp = document.getElementById("inpt") body.classList.remove("bg") inp.classList.remove("iwidth") } document.addEventListener("click", function(e) { if (e.target.id != "inpt") { inactive(); } }) input { outline: none; width: 150px; padding: 2px; } .iwidth { width: 300px; } .bg { background: rgba(0, 0, 0, 0.8); transition: 300ms; } <input type="search" name="" id="inpt" onclick="active()">Lo que puedes hacer es:
<input type="search" name="" id="inpt" onfocus="active()" onblur="deactivate()">Puedes usar onfocus y desenfoque
function active() { let body = document.body; let inp = document.getElementById("inpt") body.classList.toggle("bg") inp.classList.toggle("iwidth") } input { outline: none; width: 150px; padding: 2px; } .iwidth { width: 300px; } .bg { background: rgba(0, 0, 0,0.8); transition: 300ms; } <input type="search" name="" id="inpt" onfocus="active()" onblur="alert('deactivate')">