Jquery seleziona il campo di testo SUCCESSIVO sul tasto Invio Premere

Ho creato una pagina utilizzando jquery e al caricamento seleziona automaticamente il primo campo di testo. Voglio che poi si sposta al campo successivo quando viene premuto il tasto ENTER.Jquery seleziona il campo di testo SUCCESSIVO sul tasto Invio Premere

$('.barcodeField input').bind('keyup', function(event) { 
    if(event.keyCode==13){ 
     $("this + input").focus();  
    } 
});

Non riesco a trovare nulla che funzioni in rete. E ho setacciato i forum.

fonte

2011-01-10 Grant Unwin

Interessante, perché ho risposto a una domanda proprio come questo :) http://stackoverflow.com/questions/4494552/change-enter- da-presentazione-per-tab/4494691 # 4494691. Inoltre, sconsiglierei questo, perché gli utenti sono abituati a utilizzare la scheda per andare in un altro campo invece di entrare. –

** non farlo **. – zzzzBov

Sì, lo so che questo è un no no totale quando si tratta di pagine web, ma questo è per un sistema di mappatura Barcode utilizzando uno scanner di codici a barre, che scrive sullo schermo in questo formato "," + codice a barre + "INVIO" –

si dovrebbe usare:

$(this).next('input').focus();

fonte

2011-01-10 17:35:10 Sarfraz

Ciò funziona se il successivo fratello è un '', ma se si tratta di un '' o qualcosa d'altro, non sarà trovare una corrispondenza . – user113716

In sostanza, avete solo bisogno di alto gli elementi DOM in qualche struttura in modo che sia possibile selezionare il prossimo. Ti suggerisco di sfruttare il tabindex, ma tutto ciò che ti permette di avere un ordine definito funzionerà.

fonte

2011-01-10 17:36:15

Ho creato una piccola funzione che può fare quello che ti serve. Questa è la versione che uso, quindi potrebbe essere necessario modificare i nomi delle classi, ma dovresti ottenere l'idea.

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".vertical").keypress(function(event) { 
     if(event.keyCode == 13) { 
     textboxes = $("input.vertical"); 
     debugger; 
     currentBoxNumber = textboxes.index(this); 
     if (textboxes[currentBoxNumber + 1] != null) { 
      nextBox = textboxes[currentBoxNumber + 1] 
      nextBox.focus(); 
      nextBox.select(); 
      event.preventDefault(); 
      return false 
      } 
     } 
    }); 
}) 
</script>

Quindi, in pratica: -

ottenere tutti i campi di input corrispondenti .vertical
Trova che è la casella di testo corrente
Trova il prossimo
Impostare la messa a fuoco su quella uno

fonte

2012-05-10 22:49:54

ben fatto, questa è una bella risposta – MaVRoSCy

dovrebbe essere la risposta accettata! – nemesisfixx

qualsiasi idea su make circle se raggiungi la fine dell'input vai all'indice 0 qualcosa del genere? –

provare questo:

(function($){ 
    $.fn.enterNext = function(){ 
     var _i =0; 
     $('input[type=text], select',this) 
      .each(function(index){ 
      _i = index; 
      $(this) 
       .addClass('tab'+index) 
       .keydown(function(event){ 
        if(event.keyCode==13){ 
         $('.tab'+(index+1)).focus(); 
         event.preventDefault(); 
        } 
       }); 

     }) 
    $("input[type=submit]",this).addClass('tab'+(_i+1)); 
}})(jQuery);

per l'uso:

$('form.element').enterNext();

nel mio caso questa è la soluzione migliore che ho ottenuto perché la funzione .Next() è severo con gli elementi di fuori del loro DOM ramo. Il modo migliore è forzare un indice.

e dispiace per il mio pessimo inglese ...

fonte

2013-02-03 02:36:19 penacho123

Ecco la soluzione mi è venuta. Il problema che avevo era che dovevo mantenere il tabindex, cioè doveva funzionare esattamente come il tab. Usa sia underscore che jquery.

ho lasciato nel mio codice di debug:

try { 
    var inputs = $("input[id^=tpVal-]"); 
    var sortedInputs = _.sortBy(inputs, function(element){ 
     var tabIndex = $(element).attr('tabindex');//debugging 
     var id = $(element).attr('id');//debugging 
     console.log(id +" | "+ tabIndex +" | "+ $(element));//debugging 
     return parseInt($(element).attr('tabindex')); 
    }); 
    $(sortedInputs).each(function (index, element) { 
     $(element).keyup(function(event){ 
      if(event.keyCode==13) { 
       var $thisElement = $(element);//debugging 
       var nextIndex = index+1;//debugging 
       var $nextElement = $(sortedInputs[nextIndex]); 
       var thisId = $thisElement.attr('id');//debugging 
       var nextId = $nextElement.attr('id');//debugging 
       console.log("Advance from "+thisId+" to "+nextId);//debugging 
       if($nextElement!=undefined) { 
        $(sortedInputs[index + 1]).focus(); 
       } 
      } 
     }); 
    }); 
} catch (e) { 
    console.log(e); 
}

fonte

2014-10-02 17:42:24

<!DOCTYPE html> 

<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    </head> 
    <body> 
     <input id="122" class='TabOnEnter' tabindex="1" /><br> 
     <input id="123" class='TabOnEnter' tabindex="2" /><br> 

     <input type="text" name="abc" /><br> 
      <input type="text" name="abc1" /><br> 
      <input type="text" name="abc2" /><br> 
      <input type="text" name="abc3" class='TabOnEnter' tabindex="3" /><br> 

     <input class='TabOnEnter' tabindex="4" /><br> 
     <input class='TabOnEnter' tabindex="5" /><br> 
     <input class='TabOnEnter' tabindex="6" /><br> 
<!--  <textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>--> 
     <input type="submit" value="submit" class='TabOnEnter' tabindex="7"> 


     <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script> 
      $(document).on("keypress", ".TabOnEnter", function (e) 
      { 
       //Only do something when the user presses enter 
       if (e.keyCode == 13) 
       { 
        var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]'); 
        console.log(this, nextElement); 
        if (nextElement.length) 
         nextElement.focus() 
        else 
         $('[tabindex="1"]').focus(); 
       } 
      }); 

//Hidden inputs should get their tabindex fixed, not in scope ;) 
//$(function(){ $('input[tabindex="4"]').fadeOut(); }) 
     </script> 
    </body> 
</html>

fonte

2016-05-20 13:06:57 Hrushi

Jquery seleziona il campo di testo SUCCESSIVO sul tasto Invio Premere

risposta

Problemi correlati