Wie erzwinge "Enter-Taste" als "Tab-Taste" mit Javascript?

Question

Ich arbeite an einer Website, die voller Formulare gefüllt werden soll und ich es erforderlich ist, dass, wenn die Escape-Taste gedrückt wird, zum nächsten Eingabesteuerelement wechseln, so wie es "Tab" tut. fand ich Code Fokus zu bewegen, wenn keypressed ist 13, aber diese Notwendigkeit, die ID des Elements nehmen auf das konzentrieren

<input id="Text1" type="text" onkeydown="return noNumbers(event)" /> 
<input id="Text2" type="text" /> 

<script type="text/javascript"> 

    function noNumbers(e) { 

     keynum = e.which; 

     if (keynum == 13) 
      document.getElementById("Text2").focus(); 

    } 
</script> 

Ich brauche eine verallgemeinerte Funktion, dass, wenn die Taste gedrückt Code 13 ist die Standard-Feuer „die Eingabe ist“ Ereignis des Drückens 9, natürlich in Javascript

Answer 1

Griff keypress statt und return false zurück an den Browser "die Registerkarte":

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" /> 
<input id="Text2" type="text" /> 

<script type="text/javascript"> 
    document.getElementById('Text1').onkeypress = function (e) { 
     if (e.which === 13) { 
      document.getElementById("Text2").focus(); 
      return false; 
     } 
    }; 
</script> 

Answer 2

Dies wird mehrere Eingabefelder behandeln. Hier

ist die jQuery-Version: http://jsfiddle.net/TnEB5/3/

$('input').keypress(function(e) { 
 
    if (e.which == 13) { 
 
     $(this).next('input').focus(); 
 
     e.preventDefault(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="Text1" type="text" /> 
 
<input id="Text2" type="text" /> 
 
<input id="Text3" type="text" />

Hier ist die reine JavaScript-Version: http://jsfiddle.net/TnEB5/5/ (Sie wollen wahrscheinlich die Geschwister anders zu bekommen)

function tab(e) { 
 
    if (e.which == 13) { 
 
     e.target.nextSibling.nextSibling.focus(); 
 
     e.preventDefault(); 
 
    } 
 
} 
 
var inputs = document.getElementsByTagName('input'); 
 
for (var x = 0; x < inputs.length; x++) 
 
{ 
 
    var input = inputs[x]; 
 
    input.onkeypress = tab; 
 
}

<input id="Text1" type="text" /> 
 
<input id="Text2" type="text" /> 
 
<input id="Text3" type="text" />

Answer 3

<input type="text" value="" onkeyup="doNext(this);"> a <br> 
<input type="text" value="" onkeyup="doNext(this);"> b <br> 
<input type="text" value="" onkeyup="doNext(this);"> c <br> 

function doNext(el){     
    if(event.keyCode=='13'){ 
    var nextEl = el.form.elements[el.tabIndex+1]; 
    if (nextEl && nextEl.focus) nextEl.focus(); 
    } 
} 

Answer 4

Ich glaube, mit e.preventDefault(); ist sicherer als falsch zurück zu kommen.

Answer 5

Sie müssen die tabindex Eigenschaft der Eingabefelder für eine generische Lösung explizit festlegen. So etwas wie

<input id="Text1" type="text" tabindex="1" /> 
<input id="Text2" type="text" tabindex="2" /> 

<script type="text/javascript"> 
    $('input').keypress(function(e){ 
     if(e.which==13){ 
      $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus(); 
      e.preventDefault(); 
     } 
    });  
</script> 

diese Lösung verwendet jquery die Event-Handler für alle Eingabetyp-Elemente auf der Seite zuweisen, konzentrieren Sätze auf das Element mit der nächsthöchsten tabindex Eigenschaft, und verhindert, dass das Formular von der Abgabe, wenn enter gedrückt wird mit e.preventDefault(). Hier ist ein jfiddle

Answer 6

Obwohl der Beitrag alt ist, hoffe ich, meine Antwort kann jemand in Not helfen. Ich habe eine smilar Situation:

Ich habe eine sehr große Form für einen Mitarbeiter Scheduler-Anwendung mit verschiedene Arten von Eingabefeldern. Einige der Eingabefelder sind manchmal und nicht zu anderen Zeiten versteckt. Ich wurde aufgefordert, die Enter-Taste als Tab-Taste verhalten, so dass die Benutzer des Formulars die 10-Taste bei der Erstellung ihrer Mitarbeiter Zeitplan verwenden können. Hier ist, wie ich mein Problem gelöst:

$(document).ready(function() { 
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form) 
    $(":text").on("keydown", function() {//(2)When an input field detects a keydown event 
     if (event.keyCode == 13) { 
      event.preventDefault(); 
      var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs 
      if (nextInput) { 
       nextInput.focus(); //(4)focus that next input if the input is not null 
      } 
     } 
    }); 
}); 

Was ich tun musste, war:

1. Erstellen Sie eine Sammlung aller Eingänge I zu prüfen, wenn der Tabulatortaste. In meinem Fall sind Texteingaben sichtbar.
2. Auf ein Keydown-Ereignis auf den fraglichen Eingaben lauschen, in meinem Fall alle Textfeldeingaben
3. Wenn die Eingabetaste auf meiner Texteingabe gedrückt wird, bestimmen Sie, welcher Eingang als nächstes fokussiert wird.
4. Wenn diese Eingabe gültig ist, bringen Sie sie in den Fokus.