Question

在我的代码示例中，当您将光标放在两个输入字段之一中然后按键盘上的ENTER时，时间戳编号显示在下面的div中。再次按ENTER键，它会改变。

如果您取出其中一个文本字段，那么只有一个，则表单似乎发布（重新加载页面）。

我无法弄清楚为什么只有一个输入字段会发生这种情况。

function handleKeyPress(event) {
  if (event.keyCode == 13)
    document.getElementById('theButton').click();
}
function theFunc() {
  document.getElementById("theTime").innerHTML = Math.floor(Date.now());
}

<form>
  <input type="text" name="textInput" onKeyPress="handleKeyPress(event)"><br>
  <input type="text" name="textInput2" onKeyPress="handleKeyPress(event)"><br>
  <input type="button" value="Submit" id="theButton" onclick="theFunc()">
</form>

<div id="theTime"></div>

Answer 1

<强> Event.preventDefault（）

function handleKeyPress(event) {
  if (event.keyCode == 13)
    event.preventDefault(); // magic
    document.getElementById('theButton').click();
}

function theFunc() {
  document.getElementById("theTime").innerHTML = Math.floor(Date.now());
}

<form>
  <input type="text" name="textInput" onKeyPress="handleKeyPress(event)"><br>
  <input type="button" value="Submit" id="theButton" onclick="theFunc()">
</form>

<div id="theTime"></div>

在文本输入上点击返回时无法阻止表单发布

1 个答案: