從編輯字段重複文成不可編輯段落，沒有刷新

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|\s\n/); 
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

HTML

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

的Javascript

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; 
} 

SOURCE FOR LINE BREAKS

< p>不可編輯本身

Answer 3

<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>