HTML表单-按下回车键时自动聚焦按钮

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

- Marcus Edensky

---

我会使用JavaScript来完成这个任务 - 你是在寻找一个JavaScript的答案吗？ - kinakuta

Answer 1

实现这一点的方法是使用JavaScript，我建议您使用jQuery。

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

或者您可以尝试使用Jarry的方法。

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

您可以通过添加属性 autofocus="autofocus" 来使 HTML5 中的元素自动聚焦。

- RandomGuy

---

实际上，我认为 onchange 比 onkeypress 更好。但是我不会使用 jQuery，因为他说要使用纯 HTML。 - Jarry

Answer 2

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

编辑

在阅读了Frank S.的答案后，我认为更好的解决方案是使用onchange事件:

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

- Jarry

Answer 3

你可以使用input元素的'tabindex'属性来实现你的需求，这是一个简单的HTML。

- manojadams

Answer 4

就像Kinakuta所说的那样，我认为JavaScript(jQuery)会做得更好。这里有一个链接，解释了你需要的一切。http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/

- Charles

Answer 5

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

- EDWIN THOMAS

Answer 6

试一下

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

13：回车的ASCII码

- EDWIN THOMAS