Question

我有一个文本区域和一个按钮。就像这样：

<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />

现在，我要做的是点击按钮，该文本将显示在此文本区域上方的同一页面上，就像我们在stackoverflow上发表评论或回答问题一样。

如何做到这一点？请帮助。

Answer 1

你可以使用javascript实现这一点之前添加任何标签（通常使用div或span标签）textarea标签

<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />

Javascript代码将是

function showtext(){
 var text = document.getElementById("txtarea");
 var showarea = document.getElementById("adduserdata");
 showarea.innerHTML=text.value;
}

here is working example

Answer 2

如果使用Jquery（以前的文本将保留），这将会这样做：

$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});

或者像这样：

$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});

Fiddle

Answer 3

正如你想要的那样，因此附加到<div>除法元素，我假设你会接受这个答案（作为上述所有评论和答案的摘要）：

<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
    function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>

这可以让您简单地将其附加到文本中。 Fiddle

单击按钮显示textarea内容

3 个答案: