Impostare l’attenzione sul campo di testo dopo aver aggiornato un altro div utilizzando AJAX

Mi sono rotto la testa per il seguente problema ora e spero che voi ragazzi potete indicarmi la (probabilmente ovvia) soluzione.

Ho una semplice applicazione web che prende in input un campo di input (type = “text”). Quando la pagina viene caricata, il cursore è pronto per accettare l’input. Non appena l’utente si allontana (onBlur), la parte AJAX entra in azione, cerco il codice nel database e, a seconda del risultato, la casella a destra diventa verde o rimane rossa.

Dopo questa modifica, voglio che il campo di input sia cancellato e pronto a ricevere un nuovo input. Cancellare il campo funziona, ma non è necessario concentrarsi su di esso. Ho provato focus () e select (), no go … Ho provato a passare un setTimeout, no go. Con il codice corrente non funziona in FF, Chrome e IE. Spero che voi ragazzi potete darmi un suggerimento.

Questo è il codice della pagina web:

    function checkTicket(tno) { var xmlhttp; if (tno=='') { document.getElementById('inside').innerHTML='0'; document.getElementById('validbox').style.backgroundColor='#FF0000'; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('inside').innerHTML=xmlhttp.responseText; if (document.getElementById('inside').innerHTML=='1') { document.getElementById('validbox').style.backgroundColor='#00FF00'; } else { document.getElementById('validbox').style.backgroundColor='#FF0000'; } set_focus(); } } xmlhttp.open("GET","check_eticket.php?t="+tno,true); xmlhttp.send(); } function set_focus() { document.form.ticketnumber.value=''; document.form.ticketnumber.focus(); }    
TOEGANGSCODE:
0

Il problema è in realtà piuttosto semplice: il “viewport” della pagina perde attenzione.

Tutti gli elementi “attivi” in una pagina Web (campi modulo, ancore) ricevono un “tabindex”. Quando si compila il campo e si preme “tab”, la messa a fuoco passerà al successivo elemento “attivo”.

Sulla tua pagina, non esiste un elemento “successivo”. Il browser metterà quindi a fuoco l’elemento successivo nell’interfaccia del browser: nel mio caso (Firefox 14.01), questo elemento successivo è la scheda nella parte superiore del browser.

Questa scheda non fa parte della tua pagina web. Il mio browser impedisce quindi alla pagina di “rubare” il focus.

La risposta è in realtà piuttosto semplice: basta aggiungere un elemento attivo in più. Per html4.01, i seguenti tag possono ricevere lo stato attivo: A, AREA, BUTTON, INPUT, OBJECT, SELECT e TEXTAREA (vedere Tab Index su div ). La specifica html5 mi dice che puoi usare un tabstop per aggiungere qualsiasi elemento html a questo elenco, ma purtroppo, questo non ha funzionato (ancora?) Per me.

Per ora, ti consiglierei di aggiungere un’ancora alla pagina, come mostrato nella soluzione qui sotto.

      
TOEGANGSCODE:
bang!