html表单 - 按下回车时自动按钮焦点

Posted 2023-03-05

【中文标题】html表单 - 按下回车时自动按钮焦点

【英文标题】：html form - automatic button focus when pressing enter

【发布时间】：2012-04-22 09:23:21

【问题描述】：

我正在构建一个表，我想从中更新数据库的不同字段。输出当前值，然后是提交按钮和用于输入新值的文本字段。

当我为某个字段输入新值时，我希望该文本字段的提交按钮自动获得焦点，以便能够简单地按 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>";

【问题讨论】：

我会使用 javascript 来完成此任务 - 您在寻找 javascript 答案吗？

【参考方案1】：

您可以使用输入元素的“tabindex”属性来完成您的要求，即简单的html。

【参考方案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>

【参考方案3】：

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

【参考方案4】：

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

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

或者你可以试试 jarry's

<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 上的元素

【讨论】：

实际上，我认为 onchange 比 onkeypress 更好。但我不会使用 jquery，因为他说的是纯 html。

【参考方案5】：

<script type="text/javascript">
function focusbutton() 

  if( event.keyCode == 13 )
  document.getElementById('BUTTON_ID').click();

</script>

【参考方案6】：

试试这个

<script type="text/javascript">
function focusbutton() 

 if( event.keyCode == 13 )
 document.getElementById('BUTTON_ID').click();

</script>

13 : 输入的 ASCII 码