English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Vuoi implementare la funzione: quando l'input box perde il fuoco e non si clicca sul pulsante di cancellazione, esegui il metodo reset per ripristinare lo stile dell'input, quando si clicca sul pulsante di cancellazione, esegui il metodo clear per cancellare il contenuto dell'input.
Come mostrato nell'immagine
Volevo implementare con il seguente codice
$('.search-input').focusout(function () { if (document.activeElement.className !== 'close-t') { //close-t è il nome della classe del pulsante di cancellazione $('.search-input').addClass('search-before'); $('.close').css('display', 'none'); document.getElementById('search').value = ''; } });
Altri scoperte, quando il campo input perde il fuoco, il primo a ottenere il fuoco è il tag body, a causa di questo, il metodo non funziona, alla fine è stato utilizzato il seguente codice per implementare questa funzione
$("#search").focusout(function () { //Verifica se il pulsante di cancellazione è stato cliccato dopo la perdita del fuoco, se sì, non annullare 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); });
La verifica del fuoco è stata eseguita in ritardo, quindi ora il fuoco è stato spostato dal body al vero elemento cliccato, quindi eseguire nuovamente la verifica del fuoco per vedere se è la chiave di cancellazione.
Ecco tutto il contenuto che l'autore ha condiviso su come判断点击input上标签还是其余标签的实现方法在chrome下,spero che possa essere utile come riferimento, e spero che tutti possano sostenere il tutorial Yell.