HTML/Javascript 显示用户输入（刷新问题）
Posted
技术标签:
【中文标题】HTML/Javascript 显示用户输入（刷新问题）【英文标题】：HTML/Javascript Display User input (Refresh Issue) 【发布时间】：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>
【问题讨论】：
表单提交......这就是表单的作用。 【参考方案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，但它仍然存在刷新问题。我对此还是很陌生，我正在努力弄清楚我错过了什么哈哈。以上是关于HTML/Javascript 显示用户输入（刷新问题）的主要内容，如果未能解决你的问题，请参考以下文章
如何在HTML / Javascript中创建可编辑的组合框？