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

Submit form using enter without triggering page refresh

本文关键字：刷新 enter 提交 表单 使用      更新时间：2024-04-28

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

我正在制作一个交互式游戏，每当用户做出响应（提交表单）时，他的响应都会添加到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()是计算响应的函数，其余的应该是显而易见的。

首先在输入中添加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()
        }
       })
     }
}

在js函数中使用preventDefault（）来抑制"回车"默认行为。http://www.w3schools.com/jsref/event_preventdefault.asp

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

然后，如果您使用的是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 */
    }
});

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

相关文章：