Question

我有三个单独的文本框，并且需要一个按钮，可以将框中的所有内容复制到第4个框中。我怎么能用javascript做到这一点？

<form>
<textarea cols="60" rows="5" id="box1">PAST: </textarea>
<br /><br />
<textarea cols="60" rows="5" id="box2">PRESENT: </textarea>
<br /><br />
<textarea cols="60" rows="5" id="box3">FUTURE: </textarea>

<br /><br />
<input name="" type="button" />
<br /><br />
<textarea cols="60" rows="5" id="box4">All Past Present Future</textarea>
</form>

Answer 1

您只需提取textarea值 - 并使其连接成为此“聚合”textarea的值。使用jQuery很容易，比如：

$('#button_id').click(function() {
  $('#box4').val(
    $('#box1').val() + $('#box2').val() + $('#box3').val()
  );
});

Answer 2

试试这个：

$('button').click(function(){
    var text = "";
    $('textarea:not(:eq(3))').each(function(){
       text += this.value
    })
    $('textarea:eq(3)').val(text)    
})

demo

Answer 3

jsFiddle：http://jsfiddle.net/wCPbY/3/

// Runs on document ready
$(document).ready(function()
{
    // Grabs each text in the textareas based on the id, added spaces in between.
    var text = $("#box1").text() + " " + $("#box2").text() + " " + $("#box3").text();

    // Appends the text to box4.
    $("#box4").text( text );
});

Answer 4

使用jQuery，您可以创建一个捕获所有必需元素的选择器。您可能希望更改HTML以使元素与类属性匹配，以便选择器能够将它们组合在一起。

<textarea cols="60" rows="5" class="textGroup" id="box1">PAST: </textarea>
<textarea cols="60" rows="5" class="textGroup" id="box2">PRESENT: </textarea>
<textarea cols="60" rows="5" class="textGroup" id="box3">FUTURE: </textarea>
<textarea cols="60" rows="5" id="box4">All Past Present Future</textarea>

获取所有textareas的选择器将是 - $(".textGroup") 现在我们所要做的就是遍历所有内容，收集内容并将其附加到主All Past Present Future textarea。

var wholeString = '';
$(".textGroup").each(function(index,elem){
  wholeString += $(elem).text();
});

$("#box4").text(wholeSrting);

Answer 5

您不需要像jQuery一样加载整个JavaScript库。试试这个简单的JavaScript（专为可伸缩性而构建！）

var textboxes = document.getElementsByTagName('textarea'),
    box4 = document.getElementById('box4'),
    i;

for (i = 0; i < textboxes.length - 1; i++) {
    box4.value += textboxes[i].value;
}

这是你的jsFiddle。

Javascript如何将多个文本框复制到一个文本框中

5 个答案: