将文本从可编辑字段复制到不可编辑段落，而不刷新

Question

我正在寻找一种无需刷新页面即可实现这一目标的简单方法：

1.( 用户在可编辑的字段或<p>中输入一段文本

2.( 用户单击按钮

3.( 文本被复制/复制到不可编辑的<p>

有什么想法吗？谢谢！

编辑：在下面选定的答案的基础上，这是一种维护段落换行符的方法;

Javascript：

function copyAddress() {
var x = document.getElementById("INPUTPARA").value;
document.getElementById("DUPEPARA").innerHTML = x;
} 
function addBreak(INPUTPARA) {
var textarea = INPUTPARA;
var matches = textarea.value.split(/n|sn/);
textarea.value = matches.join("<br>n") + "<br>";
}
function eraseText() {
document.getElementById("INPUTPARA").value = "";
}

.HTML：

<textarea id="INPUTPARA"></textarea>
<button type="button" onclick="addBreak(this.previousElementSibling);copyAddress();eraseText()">Try     it</button>
<p id="DUPEPARA"></p>

Answer 1

<textarea id="myTextarea"> 2233 West Chicago IL , 556699</textarea>
<p>Click the button to copy the address.</p>
<button type="button" onclick="copyAddress()">Try it</button>
<p id="copiedAddress"></p>
<script> function copyAddress() {
var x = document.getElementById("myTextarea").value;
document.getElementById("copiedAddress").innerHTML = x;
} </script>

Answer 2

<form>
    <input type="text" id="text">
</form>
<button onclick="myFunction()">copy</button>
<p style="border:solid 1px #000;height:20px;" id="copied"></p>
<script>
    function myFunction() {
        var txt = document.getElementById("text").value;
        document.getElementById("copied").innerHTML = txt;
    }
</script>

Answer 3

HTML

<input type="text" id="inp">
<button onclick="start()">COPY</button>
<p id="para"></p>

爪哇语

function start(){
var text = document.getElementById("inp").value;
document.getElementById("para").innerHTML = text;
}

或者如果你想使用JQuery

function start(){
var text = $("#inp").val();
$("#para").html(text);
}

您还可以将 TEXTAREA 与指定的列和行一起使用

<textarea rows="4" cols="50" id="inp"></textarea>

为了保留换行符，你可以把这个

#para{
white-space:pre-line;
}

换行符的来源

本身不可编辑