使用 enter 提交表单而不触发页面刷新答案

【问题标题】：Submit form using enter without triggering page refresh使用 enter 提交表单而不触发页面刷新
【发布时间】：2016-08-01 11:20:10
【问题描述】：

我知道可以使用回车键提交表单，但这样做会刷新页面。

我正在制作一个互动游戏，只要用户做出响应（提交表单），用户的响应就会添加到div。

但是，通过刷新页面，div 中的当前文本会消失，因此这是不希望的。

当您提交表单而不刷新页面时，是否可以使用回车键触发脚本？

图解示例：

<form action="tdat.php" method="post" onsubmit="return answer(event)">
    <input type="text" name="userInput" id="searchTxt" maxlength="50" size="50">
</form>

这是我正在使用的表格。我尝试制作一个函数answer(e) 来响应用户的输入，并将文本显示到div。

但是，代码answer(e) 没有运行，页面也刷新了。我应该如何对抗这个？提前致谢。

更新：

对于那些想知道answer(e)事件内容的人如下：

function answer(e) {
    if (e.keyCode == 13) {
        addText()
        responseCheck()
        document.getElementById("searchTxt").value = ""
        autoScroll()
    }
}

addText() 是将HTML 附加到div 的那个，responseCheck() 是计算响应的函数，其余的应该是显而易见的。

【问题讨论】：

什么是事件？回答？
更新更清晰。感谢@uzaif 的提醒。
在输入中尝试 keydown 事件并检查 event.keyCode ==13，因为您没有提交按钮
只需在输入中添加 onkeydown 就可以了
这行得通，但它会导致页面刷新，导致文本在页面重新加载之前短暂出现在 div 中。有没有办法防止重新加载？

标签： javascript html forms

【解决方案1】：

首先，您需要从表单标签。

那么，如果你使用的是 jQuery

$('input[type=text]').keypress(function(e) {
    if (e.which == 13) {
        e.preventDefault();

        /* AJAX code to post data to action */
        /* add Div based on response from AJAX call */
    }
});

只要在文本字段处于焦点时按下一个键，上面的 sn-p 就会运行。如果按下的键是回车按钮，那么它将进入 if 块，您可以在其中编写代码以使用 AJAX 调用您的操作。

【讨论】：

【解决方案2】：

首先在输入中添加 onkeydown 并删除导致重新加载整个页面

<input type="text" name="userInput" id="searchTxt" maxlength="50" size="50" onkeydown="return answer(event)">

现在使用下面的js函数

function answer(e) {
    if (e.keyCode == 13) {
        addText();
        $.ajax({
        url:"tdat.php",
        type:"POST",
        data:$("#searchTxt").val(),
        success:function(){
          $("searchTxt").val("");
          autoScroll()

        }
       })
     }
}

【讨论】：

Uncaught ReferenceError: $ is not defined
包含 jquery 库

【解决方案3】：

在你的 js 函数中使用 preventDefault() 来抑制“进入”默认行为。 http://www.w3schools.com/jsref/event_preventdefault.asp

【讨论】：