Formularübergabe ändern (Enter to tab)

Ich habe eine echte Grundform (Code unten) mit einer Reihe von Back-Panel PhP. Es gibt einen Scanner, der zum Eingeben der Daten verwendet wird, aber anstelle eines Tabs nach jedem Element wird ein "Enter" -Befehl gesendet.Formularübergabe ändern (Enter to tab)

Ist es praktikabel, JavaScript hinzuzufügen, um zu veranlassen, stattdessen zum nächsten Formularfeld zu gelangen, und auf dem letzten Formularfeld es stattdessen einzureichen? Ich habe ein paar Skripte online gefunden, aber keines, das ich ausprobiert habe, hat in Firefox/Chrome funktioniert.

Code:

<html><head><title>Barcode Generation</title></head><body> 
<fieldset style="width: 300px;"> 
<form action="generator.php" method="post"> 
Invoice Number:<input type="text" name="invoice" /><br /> 
Model Number:<input type="text" name="model" /><br /> 
Serial Number:<input type="text" name="serial" /><br /> 
<input type="hidden" name="reload" value="true" /> 
<input type="submit" /> 
</form><br /><a href=null>en espanol</a></fieldset> 
</body></html>

Quelle

2012-03-29 NRGdallas

Ja.

Sie müssen einen 'onsubmit'-Handler für das Formular implementieren, das überprüft, ob die [ENTER] -Taste aus dem "richtigen" Feld gedrückt wurde (oder das Formular ist ausreichend ausgefüllt). Wenn nicht, sollte der Handler einfach false zurückgeben (um die Übergabe zu verhindern). (Nur das nächste Bit müssen.)

Dann müssen Sie eine 'onkeypress' Handler für jede Eingabe, die gescannt werden können, zu implementieren, und wenn Sie eine [ENTER] -Taste erhalten, ~~aufrufen. PreventDefault ()~~ verhindern Einreichung des Formulars und ~~triggern ein [TAB] 'Tastendruck' Ereignis~~ . Fokus() das nächste Feld.

Update: das für mich funktioniert:

<html> 
    <head> 
    <title>Barcode Generation</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     function validate() { 
     return ((/\S+/.test($('input[name="invoice"]').val())) && 
       (/\S+/.test($('input[name="model"]').val())) && 
       (/\S+/.test($('input[name="serial"]').val()))); 
     } 

     $().ready(function(){ 
     $('#generator_form') 
      .submit(validate) 
      .find('input[type="text"]') 
      .keypress(function(evt) { 
       if (evt.which == 13) { // ENTER pressed 
       var next_elem; 
       if (evt.target.name == 'invoice') { next_elem = $('input[name="model"]'); } 
       else if (evt.target.name == 'model') { next_elem = $('input[name="serial"]'); } 
       else if (evt.target.name == 'serial') { return validate(); } 
       $(next_elem).focus(); 
       return false; 
       } else { // some other key pressed 
       return true; 
       } 
      }) 
      .end(); 
     }); 
    </script> 
    </head> 
    <body> 
    <fieldset style="width: 300px;"> 
     <form id="generator_form" action="generator.php" method="post"> 
     Invoice Number:<input type="text" name="invoice" /><br /> 
     Model Number:<input type="text" name="model" /><br /> 
     Serial Number:<input type="text" name="serial" /><br /> 
     <input type="hidden" name="reload" value="true" /> 
     <input type="submit" /> 
     </form> 
     <br /> 
     <a href=null>en espanol</a> 
    </fieldset> 
    </body> 
</html>

Aktualisiert: auf [ENTER] in 'seriellen' Feld vorzulegen.

Aktualisiert:, um in allen Fällen ordnungsgemäß zu validieren.

Quelle

2012-03-29 05:25:05

Ratschläge für Ressourcen, um das zu lernen? Ich weiß absolut 0 Javascript überhaupt :( – NRGdallas

die jQuery-Dokumentation für Ereignisse befasst sich mit diesen Themen schön und bietet Beispiele: http://api.jquery.com/category/events/ –

Wenn Sie eine Weile warten können, werde ich update meine Antwort mit einem Beispiel –

Formularübergabe ändern (Enter to tab)

Antwort

Verwandte Themen