Question

我正在寻找一种简单的方法来实现而不刷新页面

1。）用户在可编辑字段中输入 PARAGRAPH 文本或<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

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

＆LT; p>不可自行编辑

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

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

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

3 个答案: