Question

我正在尝试将文本框的值复制到textarea但是使用javascript函数复制该值，但它会在一秒钟后从textarea中消失。我做错了什么？复制后为什么会消失？这是html：

<html>
<head>
    <title>
    </title>
    <script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
    <form>
           <label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
           <label>Key/Value List: </label><br>
           <textarea name="outputText" rows="10" cols="50"  id="t2" ></textarea><br><br>
           <input type="submit" value="Add" onClick="fn_copy()" />
    </form>


</body>

这是javascript代码：

function fn_copy()
{
    var temp = document.getElementById("t1").value;
    if(temp != "")
    {
        document.getElementById("t2").value = temp;
    }
    else
        alert("Text is Empty");
}

谢谢。

Answer 1

将按钮类型更改为button而不是submit。否则，您的页面将被刷新（submit的默认行为），因此您的textarea内容将重置。

<input type="button" value="Add" onClick="fn_copy()" />

Answer 2

你的问题是你正在使用提交类型的输入，当你点击它时，功能fn_copy执行，但也做一个帖子请求，这就是价值消失的原因。

更改类似按钮的输入，它将起作用

function fn_copy()
{
    var temp = document.getElementById("t1").value;
    if(temp != "")
    {
        document.getElementById("t2").value = temp;
    }
    else
        alert("Text is Empty");
}

<form>
  <label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
  <label>Key/Value List: </label><br>
  <textarea name="outputText" rows="10" cols="50"  id="t2" ></textarea><br><br>
  <button type="button" onclick="fn_copy()">Add</button>
</form>

您可以在此处查看工作示例：https://jsfiddle.net/8e5e4wuz/

Answer 3

http://www.w3schools.com/jsref/event_preventdefault.asp

使用preventdefault阻止它提交。

Answer 4

试试这个。将任何ID添加到按钮，例如btn，然后执行以下操作：

function fn_copy()
{
    var temp = document.getElementById("t1").value;
    if(temp != "")
    {
    document.getElementById("t2").value = temp;
    }
    else
    alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
    fn_copy();
    event.preventDefault();
})

该值将被复制到textarea但稍后会消失

4 个答案: