html form - автоматический фокус кнопки при нажатии enter

Question

Я строю таблицу, из которой я хочу обновить различные поля базы данных. Выводится текущее значение, затем кнопка отправки и текстовое поле для ввода нового значения.

Когда я ввожу новое значение для определенного поля, я хочу, чтобы кнопка отправки этого текстового поля автоматически сфокусировалась, чтобы иметь возможность просто нажать ENTER для обновления базы данных. Как это достигается? Я думаю, что это возможно с помощью простого HTML. Вот кусок кода:

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

Способ выполнить это с помощью javascript, и я предлагаю вам использовать jQuery.

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

Или вы можете попробовать Джарри

<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> 

Вы также можете автофокусировку элемент на HTML5, добавив атрибут autofocus="autofocus"

Answer 2

Вы можете использовать атрибут «TabIndex» для ввода элемента, чтобы выполнить ваше требование, которое является простым HTML.

Answer 3

как kinakuta сказал (а), вам нужно использовать javascript, чтобы делать то, что вы хотите.

что-то, как это будет делать трюк

<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

после прочтения ответа Франк С.,, я думаю, что лучшее решение это использовать OnChange событие:

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

Answer 4

Как сказал Кинакута, JavaScript (jQuery) сделал бы это намного лучше, я думаю. Вот ссылка, которая объясняет все, что вам нужно. 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 e Of Enter