come catturare la finestra di input momento perso messa a fuoco?

Sto usando una struttura listener di eventi come questa per fare un po 'di cose quando la casella di input perde lo stato attivo. ma non funzionerà. quale evento dovrei ascoltare per ottenere il momento in cui la casella di input perde il cursore al suo interno (l'utente fa clic all'esterno di esso)?come catturare la finestra di input momento perso messa a fuoco?

document.getElementById('div inside which input is located').addEventListener('blur', function(e){ if(event.target.className=='editInput'){doStuff(event.target);} } , false);

fonte

2012-12-02 lwiii

Nel tuo codice cercavi di collegare l'evento al div contenente gli input. Volevi attaccare il gestore di eventi su ogni input all'interno del div? Se è così, per favore dai un'occhiata alla mia risposta. –

L'evento corretto è onBlur. Guardate questo codice:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>element</title> 
<script type="text/javascript"> 
    function message() { 
      var text = document.getElementById("test").value; 
      alert(text); 
    } 
</script> 
    </head> 
    <body> 
     <input type="text" name="test" id="test"> 
<script type="text/javascript"> 
document.getElementById("test").onblur=message; 
</script> 
    </body> 
</html>

Funziona e stampa il contenuto del input quando si perde lo stato attivo. Forse il tuo errore è che hai collegato l'evento al div e non all'input?

fonte

2012-12-02 10:52:25 user4035

Provare ad allegare eventi in un altro modo. Grazie! – lwiii

Prova onblur invece di blur.

blur è un metodo che fa perdere l'attenzione a un oggetto, mentre onblur è un evento che viene generato quando l'oggetto perde lo stato attivo.

fonte

2012-12-02 10:42:36 ose

var input = document.getElementsByTagName('input')[0]; 

input.onfocus = function() { 
    this.className = 'highlight'; 
} 

input.onblur = function() { 
    this.className = ''; 
}

fonte

2012-12-02 10:44:19 Meliborn

do getElementsByTagName() conta gli elementi con display: nessuno; ? – lwiii

@lwiii Sì, certo! L'impostazione di una proprietà di stile non rimuove l'elemento dall'albero DOM del documento (anche se è visualizzato: nessuno) :-) –

impostazione di un gestore per l'evento sfocatura con vaniglia Javascript:

è possibile impostare gestore dell'evento sfocatura per l'elemento specifico "test" in jQuery vaniglia utilizzando il codice come questo

document.getElementById("test").onblur= yourEventHandler

È possibile utilizzare il gestore eventi nella domanda senza modifiche. Questa è la parte coperta. Tuttavia, credo che ci sia altro da dire qui.

La foto grande:

La sfocatura/eventi di attivazione sugli ingressi di testo sono tra i meno eventi problematici con cui lavorare in termini di compatibilità tra browser. Ma se hai intenzione di fare uno sviluppo serio, ti consiglio di utilizzare un framework come jQuery, YUI, Dojo, MooTools, ecc. Entrambi ti aiuteranno a scrivere codice più bello e ti proteggeranno da problemi di compatibilità.

Purtroppo, gli sviluppatori Web di realtà devono affrontare è quello di molti browser con comportamenti simili, ma non identici. Non è sufficiente trovare una soluzione che avvenga su un browser che utilizziamo al momento del test del codice che abbiamo appena scritto. Dobbiamo assicurarci che il nostro codice funzioni correttamente su tutti i browser a cui è rivolta la nostra applicazione. Quindi cosa succede se all'improvviso scopri che il tuo modo di assegnare la sfocatura non funziona anche su qualche browser per qualche elemento specifico, ma un altro lo fa? Vai ovunque nel tuo codice e metti se c'è? Sei sicuro di non aver perso nulla se segui questa strada? E poi, se trovi un altro problema con un altro browser, ne aggiungi un altro se 'e così via e così via? Forse decidi di definire una funzione setBlurEventHandler che fa quello che dice sulla scatola e la usa ovunque nel tuo codice invece di affermazioni come quella sopra. Lo fai solo per l'evento di sfocatura o per praticamente tutto ciò che fai? Ha senso farlo anche per altre cose. Grande. Ora disponi di un framework per la scrittura di codice compatibile con i browser. Se tutti noi mantenessimo le nostre strutture a noi stessi, passeremmo molto tempo a riscoprire e risolvere gli stessi problemi. Inserisci framework JavaScript open source. Puoi semplicemente usarli sfruttando le ore di duro lavoro che gli altri hanno messo in loro, ma puoi anche contribuire segnalando bug, scrivendo codice e documentazione. Questo non ha più senso?(O se in un certo momento, nel futuro, sei sicuro di avere un quadro basato su alcune idee molto intelligenti, per quanto incomplete, significa comunque metterlo là fuori e vedere sia ciò che puoi offrire alla comunità e ciò che la comunità può fare per tu ...)

Per meglio guidare questo punto a casa, lascia che ti mostri alcuni commenti presi dalla fonte di jQuery. Come ho detto prima, gli eventi sfocatura/messa a fuoco sugli input di testo sono tra gli eventi meno problematici su cui lavorare in termini di compatibilità tra i vari browser. Ma quanto sei sicuro di sapere (o ricordare!) Le varie peculiarità del browser che il tuo codice ha a che fare quando la gestione degli eventi più semplici e meno fastidiosi arriva con la documentazione del codice in linea?

// IE<9 dies on focus/blur to hidden element (#1486) 

// IE doesn't fire change on a check/radio until blur; trigger it on click 

// This still fires onchange a second time for check/radio after blur.

Per i motivi illustrati sopra, si raccomanda di non lavorare direttamente con il DOM.

Un approccio migliore utilizzando jQuery:

Supponete di avere un div chiamato formDiv con tre elementi input uno solo dei quali inizialmente avevano la classe editInput.

<div id=formDiv>  
    <input type="text" name="test1" id="test1" /> 
    <input type="text" name="test2" id="test2" class='editInput' />  
    <input type="text" name="test3" id="test3" />   
</div>

utilizzando jQuery, si può semplicemente fare qualcosa di simile (ho copiato la logica effettiva del gestore di eventi dal codice):

("#formDiv input").blur(function(){ 
     if(this.className=='editInput'){ 
      doStuff(this.target); 
     } 
});

che credo è più vicino a quello che si voleva fare, di altre soluzioni qui. (Nel codice si stava tentando di collegare l'evento al div contenente gli ingressi forse ho frainteso le vostre intenzioni, ma ho pensato che questo era quello che volevi..)

Si può provare questa soluzione con questo jsFiddle: http://jsfiddle.net/r7tuT/3/

Alcuni pensieri di divisione:

ci sono persone che vi diranno che questo o quel quadro è migliore e forse hanno ragione. Mi limiterò a commentare che jQuery è il più popolare ed è abbastanza decente. La scelta è tua, ma come ho detto credo che dovresti iniziare a utilizzare uno di questi framework prima possibile perché migliorerà la qualità del tuo lavoro, ti consentirà di fare certe cose in un batter d'occhio e cambiare il modo in cui affronti i problemi . Quando un framework o un linguaggio di programmazione ti fa questo, è un grande momento nella tua vita di programmatore :-)

fonte

2012-12-02 11:39:00

come catturare la finestra di input momento perso messa a fuoco?

risposta

Problemi correlati