Come modificare la messa a fuoco Tab per Javascript

April 10

Come modificare la messa a fuoco Tab per Javascript


Le pagine Web hanno controlli come caselle di testo, caselle a discesa e pulsanti. Quando gli utenti visitano il tuo sito, possono spostarsi attraverso questi controlli, premendo il tasto Tab. Ogni controllo ha un indice di tabulazione. Questo indice determina l'ordine in cui i Tab passa. Ad esempio, se si cambia l'indice scheda dell'ultimo pulsante nella pagina a uno, gli utenti saranno scheda di controllo che prima, quando premere il tasto tab. Utilizzando JavaScript, è possibile cambiare scheda messa a fuoco in modo che il cursore si sposta nell'ordine in cui si definisce nel codice.

istruzione

1 Aprire la pagina Web utilizzando il blocco note o un editor HTML.

2 Aggiungere questo codice alla sezione <body> del documento HTML:

<Div>

<Input id = "Text1" type = "text" />

<Input id = "Text2" type = "text" />

<Input id = "Text3" type = "text" />

<Input id = "Text4" type = "text" />

</ Div>

<Input id = "changeTabFocus" type = valore "pulsante" = tabindex "Change Tab Focus" = "- 1" onclick = "changeTabFocus ()" />

Questo crea quattro caselle di testo e un pulsante. Per impostazione predefinita, l'ordine di tabulazione delle caselle di testo è uno, due, tre e quattro. Quando la pagina Web si apre, la scheda cursore alle caselle in questo ordine. Il pulsante chiama una funzione JavaScript che cambia l'ordine di tabulazione.

3 Aggiungere il seguente codice JavaScript alla sezione "<head>" del documento:

<Script type = "text / javascript">

funzione changeTabFocus () {

// PRIMA LINEA

var elementToChange = "Text2";

// SECONDA LINEA

var newTabIndex = 1;

// Terza linea

var elementToChangeObject = document.getElementById (elementToChange);

// Quarta linea

elementToChangeObject.tabIndex = newTabIndex;

}

</ Script>

Il pulsante chiama questa funzione. La prima riga imposta la variabile "elementToChange." In questo esempio, si reimpostare l'indice scheda della seconda casella di testo (Testo2). La seconda riga imposta uno come tale indice tab. La terza linea ottiene un riferimento alla seconda casella di testo. La quarta linea cambia l'indice di scheda della casella di testo a uno. Questo cambierà l'ordine di tabulazione di quattro, uno, due e tre, perché la seconda casella di testo guadagnerà attenzione prima.

4 Salvare il documento. Aprire Esplora risorse e individuare il file. Fare doppio clic su di esso. Il tuo browser si aprirà esso. Posizionare il cursore nella barra degli indirizzi del browser.

5 Premere il tasto "Tab" fino a quando il cursore si sposta prima casella di testo. Continuare a premere il tasto "Tab". Il cursore si sposterà le caselle di testo nell'ordine di default: uno, due, tre e quattro.

6 Posizionare il cursore nella barra degli indirizzi del browser.

7 Fare clic sul pulsante "Modifica Tab Focus". Si chiamerà la funzione JavaScript. La funzione riporta la scheda di messa a fuoco in modo che il secondo guadagni casella di testo si concentrano in primo luogo.

8 Premere il tasto Tab fino a quando non si muove per le caselle di testo. Si noti che si muove a seconda casella di testo prima e salta la prima casella di testo.

9 Premere il tasto TAB e notare che si muove verso la terza casella di testo, la casella di testo quarta e poi alla prima casella di testo. Il nuovo ordine di tabulazione è ora quattro, uno, due e tre.

Consigli e avvertenze

  • Cambiare la scheda di messa a fuoco di ogni elemento della pagina utilizzando questo JavaScript. Sostituire "Testo2" con l'ID dell'elemento che si desidera modificare. Ad esempio, se si desidera modificare la scheda di messa a fuoco di un pulsante denominato "MyButton," sostituire "Testo2" con "MyButton" nella prima riga di codice JavaScript. Impostare il nuovo indice scheda nella seconda riga di codice.