simulare la funzione tasto tab in javascript

Question

Ho un modulo con molte voci. Vorrei spostare il focus sulla casella di testo successiva, una volta inserito il valore nella casella di testo corrente. e voglio continuare questo processo fino all'ultimo campo. La mia domanda è, è possibile simulare la chiave di tabulazione con la codifica javascript una volta che inserisco il valore nella casella di testo.

Senza premere il tasto Tab sulla tastiera, vorrei portare la stessa funzionalità tramite javascript. È possibile ?

Answer 1

function nextField(current){ 
    for (i = 0; i < current.form.elements.length; i++){ 
     if (current.form.elements[i].tabIndex == current.tabIndex+1){ 
      current.form.elements[i].focus(); 
      if (current.form.elements[i].type == "text"){ 
       current.form.elements[i].select(); 
      } 
     } 
    } 
} 

Questo, quando fornito con il campo corrente, salterà a fuoco sul campo con l'indice di tab successivo. Uso sarebbe la seguente

<input type="text" onEvent="nextField(this);" /> 

Answer 2

non vi resta che dare fuoco al campo di immissione successivo (richiamando il metodo di messa a fuoco() su tale elemento di input), ad esempio, se si sta utilizzando questo codice jQuery simulerà la scheda chiave Azionando eNTER:

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) { 
     e.preventDefault(); 
     var nextInput = inputs.get(inputs.index(this) + 1); 
     if (nextInput) { 
      nextInput.focus(); 
     } 
    } 
}); 

Answer 3

Necessario per emulare la funzionalità scheda qualche tempo fa, e ora ho released it as a library che utilizza jquery.

EmulateTab: Un plug-in jQuery per emulare il tabulazione tra gli elementi di una pagina.

È possibile see how it works in the demo.

if (myTextHasBeenFilledWithText) { 
    // Tab to the next input after #my-text-input 
    $("#my-text-input").emulateTab(); 
} 

Answer 4

Nella prima domanda, non è necessario un listener di eventi su ogni input che sarebbe uno spreco.

Invece, ascoltare il tasto Invio e di trovare l'elemento attualmente focalizzato utilizzare document.activeElement

window.onkeypress = function(e) { 
    if (e.which == 13) { 
     e.preventDefault(); 
     var nextInput = inputs.get(inputs.index(document.activeElement) + 1); 
     if (nextInput) { 
      nextInput.focus(); 
     } 
    } 
}; 

Un listener di eventi è migliore di molti, soprattutto a basso/browser mobili di potenza.

Answer 5

Ho adattatore la risposta di ltiong_sh a lavorare per me:

function nextField(current){ 
    var elements = document.getElementById("my-form").elements; 
    var exit = false; 
    for(i = 0; i < elements.length; i++){ 
     if (exit) { 
      elements[i].focus(); 
      if (elements[i].type == 'text'){ 
       elements[i].select(); 
      } 
      break; 
     } 
     if (elements[i].isEqualNode(current)) { 
      exit = true; 
     }  
    } 
} 

Answer 6

Questo simula una scheda attraverso una forma e dà fuoco al successivo ingresso quando si preme il tasto Invio.

window.onkeypress = function(e) { 
    if (e.which == 13) { 
     e.preventDefault(); 
     var inputs = document.getElementsByClassName('input'); 
     for (var i = 0; i < inputs.length; i++) { 
     if (document.activeElement.id == inputs[i].id && i+1 < inputs.length) { 
      inputs[i+1].focus(); 
      break; 
     } 
    } 

Answer 7

Non sono riuscito a trovare una risposta che potesse fare ciò che volevo. Ho avuto un problema in cui c'erano alcuni elementi di collegamento che non volevo che gli utenti facessero tabulazioni. Questo è ciò che mi si avvicinò con:

(. Si noti che nel mio codice ho usato a:not(.dropdown-item) invece di a sulla linea var all)

function(event){ 
     //not that this doesn't work with tab-indexes 

     //allows fluid tabbing through 

     //isolate the node that we're after 
     var current = event.target; 

     //find all tab-able elements 
     var all = document.querySelectorAll('input, button, a, area, object, select, textarea'); 

     var currentIndex; 

     for(var i = 0; i < all.length; i++){ 
      //loop through all tab-able elements 
      if(current.isEqualNode(all[i])){ 
       //if a match is found then assign index 
       currentIndex = i; 
      } 
     } 

     //focus the following element 
     all[currentIndex + 1].focus(); 
}