javascript - HTML 表单文本 onChange 事件刷新页面？

Question

"use strict";

var SEED = "";

function seedSubmit() {
    var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
}

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" onchange="seedSubmit(); return false;">
    <input type="button" onclick="seedSubmit()" value="Submit">
</form>

这是HTML：

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" onchange="seedSubmit(); return false;">
    <input type="button" onclick="seedSubmit()" value="Submit">
</form>

这是JavaScript：

"use strict";

var SEED = "";

function seedSubmit() {
    var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
}

然后我将 SEED 变量用于其他一些东西。基本上你在框中输入并按提交。如果提交按钮是 type="submit"，它会刷新页面，所以它必须是 type="button" 才能正常工作。但我根本不想要一个按钮，我想输入文本并按 Enter。但是这样做会刷新页面。我该如何防止这种情况？我在这个网站上进行了一些谷歌搜索和搜索，发现了一些帖子，但这些解决方案似乎都没有奏效，我做错了什么？人们说尝试返回错误；但这对我不起作用。

标签： javascripthtmlform-submitformspage-refresh

Answer 1

您可以将 eventListener 添加到“提交”并使用 preventDefault 方法，例如：

var SEED ="";
var form = document.getElementById("seed-form");
form.addEventListener("submit", function(event){
event.preventDefault();
var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
console.log(SEED);
});

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" >
    <input type="submit" value="Submit">
</form>