1
2
3
4

<form action="/?action=cerca" name="ricerca" id="ricerca" method="get">
       <input name="q" id="q" size="20" type="text" />
       <input type="submit" value="Cerca" />
</form>

Semplice ed essenziale.
Per portare il cursore sul campo "q" il codice necessario è davvero corto:

1
2
3

if($('q')){
       $('q').focus();
}

L'IF iniziale ci è utile per poter far partire l'azione solo ed esclusivamente quando il form di ricerca è presente nella pagina che si sta visitando ed evitare che venga generato un errore di tipo NOT FOUND o NOT DEFINED

Aggiungiamo ora l'azione al caricamento della pagina:

1
2
3
4
5

window.addEvent('domready',function(){
       if($('q')){
              $('q').focus();
       }
});

L'unico inconveniente di questo trucchetto è che se l'utente si accorge di aver sbagliato pagina e preme il tasto Backspace sulla tastiera per tornare alla pagina precedente, il focus nell'input ne impedirà il funzionamento. E' molto fastidioso!!

Quindi?
quindi dobbiamo fare in modo che alla pressione del Backspace il nostro javascript capisca se stiamo cancellando un testo o stiamo tentando di tornare indietro.

1
2
3
4
5
6

document.addEvent('keydown', function(event){
       var event = new Event(event);
       if(event.key == 'backspace' && !q.value){
              history.back();
       }
});

fatto!

NOTA: se volete evitare di caricare un framework come mootools nel vostro sito solo per effettuare un'operazione del genere, potete tranquillamente ricorrere al javascript tradizionale in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.onload = function () {
       if(document.getElementById('q')){
              var campo = document.getElementById('q');
              campo.focus();
       }
       document.onkeydown = function (event) {
              if(!event){
                      var event = window.event;
              }
              if (event.keyCode === 8 && !q.value) {
                      history.back();
              }
       }
}

alla prossima!