html onchange / onblur compatibilità

Question

Al momento sto scrivendo un sito web che deve essere compatibile con tutti i browser tra cui Internet Explorer torna alla versione 6.

Mi chiedevo di problemi di compatibilità con questi due eventi in particolare: Sto utilizzando con un tag <input> con type='text'.

• OnBlur
• OnChange

La ricerca ha trovato risposte miste e un elenco incompleto.

In particolare, la domanda è:

• Ci sono problemi noti con questi due eventi (potrebbe essere esteso ad altri eventi HTML)?
• Se sì, quali metodi possono essere utilizzati per risolvere questi problemi?

Qualsiasi aiuto molto apprezzato:)

Answer 1

Tutti i browser dovrebbero sostenere questi eventi abbastanza decentemente se si sta solo utilizzando nelle caselle di testo. Se si guarda il QuirksMode tabelle di compatibilità evento , vedrai che IE ha alcuni problemi con l'evento di modifica di pulsanti di opzione e caselle di controllo.

Se non siete molto familiare con eventi JavaScript nei browser, troverete che il modello di eventi è un pasticcio grazie al fatto che IE ha deciso di fare le cose in modo diverso dallo standard. Per superare questo problema, si dovrebbe utilizzare un framework JavaScript come jQuery , YUI , Dojo , MooTools , ExtJS , o Chiusura . Questi quadri appianare le differenze così avrete (quasi) mai avere a che fare con le differenze e bug nei vari browser. C'è un grande articolo su CodingHorror che spiega il motivo per cui si dovrebbe considerare l'utilizzo un framework JavaScript se si pensa di utilizzare JavaScript nel tuo sito che si dovrebbe leggere se siete curiosi di perché è necessario utilizzare un framework JavaScript.

Inoltre, se non si ha familiarità con gli eventi del browser del tutto, assicurarsi di aver compreso la differenza tra onchange e onblur .

Answer 2

Credo che non ci sono più problemi con questi due eventi specifici che con tutti gli eventi in Internet Explorer, più le solite stranezze strani come ad esempio questo .

La soluzione generale di gestione degli eventi e molti altri problemi è quello di utilizzare un framework Javascript cui gli sviluppatori hanno dissanguato il proprio sangue per salvare la tua, tappezzare su tutto IE (e pochi altri) weirdnesses, come ad esempio dojo . Come la gente Dojo dicono su quella pagina:

  

La parola "sostegno" significa qualcosa   molto specifico per Dojo e Dijit, in   che dire che Dojo Core e Dijit   mezzi di supporto di un browser che il 100% dei   le funzionalità disponibili funziona,   che l'accessibilità è gestita   correttamente e che tutti   internazionalizzazione e localizzazione   è supportato. Questo è un molto alta   bar, il che significa anche che mentre   Non può dire che i browser come   Opera è "supportato" per Dijit, è   molto probabile che lo farà tutto il lavoro   anche lì, ma ci possono essere alcuni   caveat che non siamo stati in grado di lavorare   muoversi (ad esempio gancio accessibilità   Opera).

I browser che sostengono come "supportata" a questo livello molto alto-bar sono (come di Dojo 1.3.2) IE 6 a 8, Safari 3.1 a 4, Firefox 2 e 3.5, Chrome 1 a 2 (funzionalità di base , tra cui la gestione degli eventi, funziona anche su Opera, Konqueror, 1.5 FF, ...).

Answer 3

Se si utilizza jQuery, provate questo:

$('input.text').click(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
    });
    $('input.text').blur(function () {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
    });

$("input:text") se si desidera raggiungere tutti i campi di input di testo.