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();
    });

或者你可以试试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上自动对焦元素

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>

Answer 3

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

Answer 4

像Kinakuta说的那样，我认为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

试试这个

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

13：ASCII代码输入

html表单 - 按Enter键时自动按钮焦点

6 个答案: