使用多个输入框按“输入”答案

【问题标题】：Pressing 'enter' with multiple input boxes使用多个输入框按“输入”
【发布时间】：2013-01-21 21:46:00
【问题描述】：

我有一个带有多个输入框和相应输入按钮的 HTML 表单。当我在第一个输入框中输入内容并按 Enter 或按钮时，它工作正常。但是，如果我在其他框中按 Enter ，它就像在第一个框中一样工作。按钮工作正常。

这是我的代码：

<script type="text/javascript">
  function fn (num) {
    alert(num);
    document.getElementById(num).focus();
  }
</script>
</head>
<body>
<form>
  <input id="1" type="text"></input> <button onclick="fn(1);">press</button><br/>
  <input id="2" type="text"></input> <button onclick="fn(2);">press</button><br/>
  <input id="3" type="text"></input> <button onclick="fn(3);">press</button><br/>
</form>

显然这是 ECMA 中的一个“怪癖”（我在 FF18.0.1 和 Safari 5.1.7 中进行了测试）。这个怪癖有解决办法吗？

我找到的一种解决方案是为每个输入框添加一个表单。

<form>
  <input id="1" type="text"></input> <button onclick="fn(1);">press</button><br/>
</form>
<form>
  <input id="2" type="text"></input> <button onclick="fn(2);">press</button><br/>
</form>
<form>
  <input id="3" type="text"></input> <button onclick="fn(3);">press</button><br/>
</form>

这是错误还是功能？有更好的解决方案吗？感谢您的任何建议。

【问题讨论】：

这是一项功能。或者称之为设计缺陷；不是错误。按钮不“对应”输入框。因此，每个表单只能有一个响应 Enter 键的按钮。不管你在哪个文本框中。所以你已经得到了答案，我不相信还有更好的答案。
不，问题不在于按钮，而在于输入框，因此您的回答完全没有抓住重点。如果我将焦点放在一个输入框上并按 Enter，它应该对那个输入框做一些事情，而不是关于另一个输入框。谢谢，但不，谢谢。

标签： input enter

【解决方案1】：

您需要使用 onKeyPress 而不是 onClick。试试这个：

function myKeyPress(args) {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    // do something here (enter has been pressed)
  }
  else {
    return false; // somehow prevents "default" form behaviors
  }
}

【讨论】：

【解决方案2】：

试试这个：

$("id").keypress(function(e) {
    if(e.which == 13) {
        respective functions
    }
});

或

 <input type="text" name="q" id="q" 
        onkeypress="if (event.keyCode == 13) {call function}" />

【讨论】：