javascript - 按下 ENTER 键时更改表单标签内的输入值

Question

考虑以下 HTML 代码:

<form>
    <div>
        <input type ="text" id="myInput"/>
    </div>
</form>

我希望当用户输入一些文本并按下 ENTER 键时，输入值将变为单词“Hello”。

为此，我添加了以下 Java 脚本代码:

<script>
  var input = document.getElementById("myInput");
  input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
      input.value ="Hello";
    }
});
</script>

不幸的是，这不起作用，因为当我写一段文字并按下 ENTER 键时，文字消失了(而不是向世界显示“你好”)。

在深入研究这个问题后，我发现如果我从 HTML 代码中删除“form”标签，那么它就可以正常工作。

我有两个问题:

1) 为什么会这样？

2) 如何在不移除“form”标签的情况下解决这个问题？

任何帮助将不胜感激!!

Answer 1

1. 发生这种情况是因为“Enter”尝试提交表单。

2. 将您的代码迁移到 onSubmit 事件处理程序可以在不删除表单标记的情况下解决问题。

我附上了片段。如果这是您的期望，请告诉我。

<form onSubmit="changeToHello(event)">
    <div>
        <input type ="text" id="myInput"/>
    </div>
</form>
<script>
function changeToHello(event) {
  event.preventDefault();
  var input = document.getElementById("myInput");
  input.value ="Hello";
}
</script>