HTML/Javascript 显示用户输入（刷新问题）答案

【问题标题】：HTML/Javascript Display User input (Refresh Issue)HTML/Javascript 显示用户输入（刷新问题）
【发布时间】：2015-12-16 22:49:44
【问题描述】：

我正在尝试获取用户在文本框中输入的内容，然后编写该输入到页面上的段落，并停止页面刷新，以便他们可以复制该输入以在其他地方使用。（这将是一个相当长的形式，但这是我遇到的一个绊脚石
--为清楚起见进行了编辑--

一切似乎都运行良好，除了当我输入输入并按下提交，输入显示正常几秒钟，然后页面刷新。有什么办法可以解决/阻止这个问题？

我尝试在显示中添加一个 while 循环，以便代码在显示时停止，但到目前为止还没有成功。

任何指点将不胜感激，谢谢。

我的代码

<html>
<head>
<script type="text/javascript">
    function checkForm() {
        var input = document.myForm.username.value;
            document.write.getElementById("display").innerHTML=("Your username is" + " " + input);
            }


    </script>
</head>

<body>

<form name="myForm">
    <input type="text" name="username" value="Enter username" /><br/>
    <input type ="submit" value="Submit" 
    onClick="checkForm()" />

</form> 

<span id="display"><p> </p> </span>

</body>
</html>

【问题讨论】：

表单提交......这就是表单的作用。

标签： javascript html forms validation refresh

【解决方案1】：

我知道你对编程很陌生

所以

如果您的提交标签在表单标签中，它将转到表单动作属性路径，如果您没有动作属性，它将刷新；因为它将有“”路径，这意味着它是当前路径

例如当你的代码是这样的

<form action="">
    <input type="submit">
</form>

但如果您的 提交标签不在表单标签中，提交标签将像简单的按钮标签一样工作。

<div>
    <input type="submit">
</div>

在这种情况下，您可以将它用于类似按钮的 JavaScript。

但是如果你在你的 onclick 函数中写 return false 它将切断你的提交过程并且它也可以在表单标签中工作。

所以我会帮你写代码

function output(){
    var text=document.getElementById("text");
    var value=text.value
    var outputDiv=document.getElementById("output")
    
    outputDiv.innerText=value
}

#output{
   height:50px;
   margin-bottom:25px;
   border:1px solid gold;
}

<div id="output"></div>

<input type="text" id="text">
<input type="submit" id="submit" onclick="output()">

最好的问候

【讨论】：

【解决方案2】：

没有document.write....

document.write.getElementById(...

应该是

document.getElementById(...

并且你需要取消表单提交。

document.forms[0].addEventListener("submit", function(evt) { evt.preventDefault(); });

这需要附加在文档就绪或窗口加载中。

其他选项是使用

<form onsubmit="return false">

【讨论】：

非常感谢，问题解决了。我意识到其他人也提到了返回 false，我把它作为函数的一部分，但它似乎不想玩得很好。所以感谢大家的帮助和反馈！

【解决方案3】：

伙计，在提交按钮上，它默认提交导致页面刷新的表单，您需要在 checkForm() 结束时返回 false；或者最后调用 e.preventdefault() ；

【讨论】：

【解决方案4】：

您的函数还需要将 false 返回到 html 表单：

function checkForm() {
    var input = document.myForm.username.value;
    document.write.getElementById("display").innerHTML=("Your username is" + " " + input);
    return false;
}

您可能还应该使用表单本身的 onsubmit 事件，而不是提交按钮上的 onclick。

【讨论】：

嗨。感谢您的反馈。我知道我错过了一些非常明显的东西。我尝试添加return false，并删除了onclick并将表单更改为onsubmit，但它仍然存在刷新问题。我对此还是很陌生，我正在努力弄清楚我错过了什么哈哈。