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

【问题标题】：Changing input value inside a form tags when ENTER key is pressed按下 ENTER 键时更改表单标签内的输入值
【发布时间】：2019-01-15 16:59:20
【问题描述】：

考虑以下 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 键时，文本消失了（而不是显示世界“Hello”）。

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

我有两个问题：

1) 为什么会这样？

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

任何帮助将不胜感激！

【问题讨论】：

"如何在不删除“form”标签的情况下解决这个问题？" - 为什么？您不希望加载新页面，那么为什么首先需要表单？

标签： javascript html forms input

【解决方案1】：

发生这种情况是因为“Enter”尝试提交表单。
将代码迁移到 onSubmit 事件处理程序可以在不删除表单标记的情况下解决问题。

我已附上 sn-p。让我知道这是否符合您的期望。

<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>

【讨论】：

嗨，Avanthika，这正是我想要的。谢谢！！
由于没有实际提交预期的表单，我建议还添加一个 return false; 语句，这样它就不会重新加载页面，例如<form onSubmit="changeToHello(event); return false;">

【解决方案2】：

preventDefault() 阻止事件的默认行为。

这里没有要阻止的 keyup 事件的默认行为，所以它没有效果。

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

【讨论】：

【解决方案3】：

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

【讨论】：

"要解决这个问题，您需要使用 AJAX" — OP 没有提及发出 HTTP 请求。仅将值更改为 Hello。
"它是 preventDefault() 函数" — preventDefault 是事件对象的方法，它与 Ajax 无关。 OP 已经在问题的代码中使用了preventDefault。
“表单本质上是一个容器，可用于保存多种类型数据的任意数量的任意子集。HTML 表单用于将数据传递到服务器。” -Stackoverflow
"我希望当用户写一些文本并按下 ENTER 键时，输入值将变为单词“Hello”。" ——这个问题。
Form的本质就是提交这些请求，这就是为什么需要AJAX。