HTML/Javascript显示用户输入(刷新问题）

HTML/Javascript Display User input (Refresh Issue)

本文关键字：刷新 新问题 输入 用户 Javascript 显示 HTML      更新时间：2023-09-26

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

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

我曾尝试在显示中添加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>

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

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

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

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

没有文档。写入…

document.write.getElementById(...

应该是

document.getElementById(...

您需要取消提交表格。

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

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

另一种选择是使用

<form onsubmit="return false">

我知道你对编程很陌生

所以

如果您的submit标记是表单标记，它将转到表单操作属性路径，如果您没有操作属性，它将刷新；因为它将有"路径，这意味着它是当前路径

例如，当你的代码像这个

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

但是，如果您的submit标记不是表单标记，submit标记将像简单的按钮标记一样工作。

<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()">

向致以最良好的问候

相关文章：