English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La función a implementar: cuando el cuadro de entrada pierde el enfoque y no se hace clic en el botón de borrado, se ejecuta el método reset para restablecer el estilo del cuadro de entrada. Cuando se hace clic en el botón de borrado, se ejecuta el método clear para borrar el contenido del cuadro de entrada.
como se muestra en la figura
Quise implementar a través del siguiente código
$(".search-input").focusout(function () { if (document.activeElement.className !== 'close-t') {//cerrar-t es el nombre de la clase del botón de borrado $('.search-input').addClass('search-before'); $('.close').css('display', 'none'); document.getElementById('search').value = ''; } });
No encontré nada más, cuando el cuadro de entrada pierde el enfoque, el primer elemento que obtiene el enfoque es la etiqueta body, por lo que este método no funciona. Finalmente, utilicé el siguiente código para implementar esta función
$("#search").focusout(function () { //Determinar si se hizo clic en el botón de borrado después de perder el enfoque, si es así, no restablecer var tapCloseButton = false; $('.close-t').focus(function () { tapCloseButton = true; }); setTimeout(function () { if (!tapCloseButton) { $('.search-input').addClass('search-before'); $('.close').css('display', 'none'); document.getElementById('search').value = ''; } ,10); });
Por lo tanto, se retrasa la ejecución de este paso de detección de enfoque, por lo que el enfoque ya se ha movido del body al elemento real sobre el que se hizo clic. Ahora, al realizar la detección del enfoque, verifique si es una tecla de borrado.
La forma de implementar la detección de si se hace clic en la etiqueta del input o en otra etiqueta bajo Chrome que he compartido con ustedes es todo lo que tengo para ofrecer. Espero que les sea útil como referencia y que apoyen activamente el tutorial de grito.