HTML-Formular - automatische Schaltfläche Fokus beim Drücken der Eingabe

Question

Ich baue eine Tabelle, aus der ich verschiedene Felder einer Datenbank aktualisieren möchte. Der aktuelle Wert wird ausgegeben, gefolgt von einer Schaltfläche zum Senden und einem Textfeld zum Eingeben des neuen Werts.

Wenn ich einen neuen Wert für ein bestimmtes Feld einfüge, möchte ich die Übermittlungsschaltfläche für dieses Textfeld automatisch fokussieren, um einfach die EINGABETASTE drücken zu können, um die Datenbank zu aktualisieren. Wie wird das erreicht? Ich denke, dass es mit einfachem HTML möglich sein muss. Hier ist ein Stück Code:

echo " 
<form method='post'> 
    <table> 
     <tr> 
      <th>Amount to receive</th> 
      <td>" . mysql_result($result, 0, "amountToReceive") . "</td>" . " 
      <td><input type='submit' value='Change' name='btnChangeAmountToReceive'> <input type='text' name='txtChangeAmountToReceive'></td> 
     </tr><tr> 
      <th>Amount received</th> 
      <td>" . mysql_result($result, 0, "amountReceived") . "</td>" . " 
      <td><input type='submit' value='Change' name='btnChangeAmountReceived'> <input type='text' name='txtChangeAmountReceived'></td> 
     </tr> 
    </table> 
</form>"; 

Answer 1

Der Weg, um dies zu erreichen, ist mit Javascript, und ich würde vorschlagen, Sie mit jQuery.

$('#mytextfield').change(function(e) { 
     $('input[type=submit]').focus(); 
    }); 

Oder Sie können versuchen Jarrys

<input type="text" onkeypress="return focusOnEnter(event)" /> 
<script type="text/javascript"> 
function focusOnEnter(e) 
{ 
var keynum = e.keyCode || e.which; //for compatibility with IE < 9 
if(keycode == 13) //13 is the enter char code 
    document.getElementsByName('btnChangeAmountReceived')[0].focus(); 
return true; 
} 
</script> 

Sie auch ein Element auf HTML5 Autofokus kann durch Hinzufügen des Attributs autofocus="autofocus"

Answer 2

Sie können das ‚tabindex‘ -Attribut für Eingabeelement Ihre Anforderung erfüllen, die eine einfache html ist.

Answer 3

wie kinakuta sagte, Sie müssen etwas Javascript verwenden, um zu tun, was Sie wollen.

so etwas wie dies tun würde, den Trick

<input type="text" onkeypress="return focusOnEnter(event)" /> 
<script type="text/javascript"> 
function focusOnEnter(e) 
{ 
var keynum = e.keyCode || e.which; //for compatibility with IE < 9 
if(keycode == 13) //13 is the enter char code 
    document.getElementsByName('btnChangeAmountReceived')[0].focus(); 
return true; 
} 
</script> 

EDIT

nach Frank S. Antwort zu lesen, ich denke, dass eine bessere Lösung ist es OnChange-Ereignis zu verwenden:

<input type="text" onchange="focusOnEnter()" /> 
<script type="text/javascript"> 
function focusOnEnter() 
{ 
    document.getElementsByName('btnChangeAmountReceived')[0].focus(); 
} 
</script> 

Answer 4

Wie Kinakuta sagte, würde JavaScript (jQuery) es viel besser machen, denke ich. Hier ist ein Link, der alles erklärt, was Sie brauchen. http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/

Answer 5

<script type="text/javascript"> 
function focusbutton() 
{ 
    if(event.keyCode == 13) 
    document.getElementById('BUTTON_ID').click(); 
} 
</script> 

Answer 6

Try This

<script type="text/javascript"> 
function focusbutton() 
{ 
if(event.keyCode == 13) 
document.getElementById('BUTTON_ID').click(); 
} 
</script> 

13: ASCII Cod Geben Sie

ein