Javascript 按ENTER键时更改表单标签内的输入值

考虑以下HTML代码：

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

---

我想，当用户写一些文本并按下回车键时，输入值将变为单词“Hello”

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

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

var input=document.getElementById（“myInput”）；
input.addEventListener（“键控”，函数（事件）{
event.preventDefault（）；
如果（event.keyCode===13）{
input.value=“Hello”；
}
});

不幸的是，当我写一个文本并按下回车键时，文本消失了（而不是向世界显示“Hello”）

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

我有两个问题：

1） 为什么会这样

---

2） 如何在不删除“表单”标记的情况下解决此问题

任何帮助都将不胜感激

preventDefault（）

防止事件的默认行为

这里没有要防止的键控事件的默认行为，因此它没有效果

---

keypress事件也会运行，当您按enter键时，它的默认行为是提交表单。

HTML中的表单函数将提交输入的数据。通常，您会添加一个“action”，它只是将表单提交给服务器（即action=“action.php”）。因为没有“动作”，所以实际上只是刷新页面。要解决这个问题，您需要使用AJAX及其preventDefault（）函数来阻止表单提交（刷新页面）

发生这种情况是因为“Enter”试图提交表单

将代码迁移到onSubmit事件处理程序可以修复此问题，而无需删除表单标记

我已经附上了这个片段。让我知道这是否是你所期待的

函数changetohhello（事件）{
event.preventDefault（）；
var input=document.getElementById（“myInput”）；
input.value=“Hello”；
}

“要解决这个问题，您需要使用AJAX”-OP没有提到发出HTTP请求。仅将值更改为Hello。“这是preventDefault（）函数”-

preventDefault

是事件对象上的一个方法，与Ajax无关。OP已经在问题中的代码中使用了

preventDefault

。“表单本质上是一个容器，可用于保存多种类型数据的任意数量的任何子集。HTML表单用于将数据传递给服务器。”-Stackoverflow“我希望当用户编写一些文本并按ENTER键时，输入值将变为单词“Hello”。-这个问题。表单的本质是提交这些请求，这就是为什么需要AJAX的原因。“如何在不删除“表单”标记的情况下解决此问题？”？“-为什么？你不想加载一个新页面，那么你为什么要首先加载表单呢？嗨，Avanthika，这正是我想要的。非常感谢。由于没有实际提交预期的表单，我建议还添加一个

return false语句，这样它就不会重新加载页面，例如