html表单-按enter时自动获得按钮焦点
html表单-按enter时自动获得按钮焦点
提问于 2012-04-10 03:30:56
我正在构建一个表，我想从该表中更新数据库的不同字段。输出当前值，然后是提交按钮和用于输入新值的文本字段。
当我为某个字段输入新值时，我希望此文本域的submit按钮自动获得焦点，这样只需按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>";回答 6
Stack Overflow用户
回答已采纳
发布于 2012-04-10 03:49:42
实现这一点的方法是使用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上的元素
Stack Overflow用户
发布于 2012-04-10 03:46:32
正如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>Stack Overflow用户
发布于 2012-04-10 03:43:11
您可以使用input元素的'tabindex‘属性来完成您的要求，这是简单的html。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10082783
复制相关文章
相似问题
腾讯云开发者
