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

深入研究问题之后，我发现如果我从HTML代码中删除“ form”标签，则可以正常工作。

我有两个问题：

1）为什么会这样？

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

任何帮助将不胜感激！

Answer 1

之所以会这样，是因为“ Enter”试图提交表单。
将代码迁移到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>

Answer 2

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

没有可以防止发生的keyup事件的默认行为，因此它没有任何作用。

keypress事件也将运行，按回车键时其默认行为是提交表单。

Answer 3

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

当按下ENTER键时，在表单标签内更改输入值

3 个答案: