2012-07-17 108 views
0

我有三个单独的文本框,并希望有一个按钮将所有框中的内容复制到第4个框中。我怎样才能做到这一点与JavaScript?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> 
+3

你的脚本在哪里?你已经尝试了什么? – MrOBrian 2012-07-17 20:57:37

+1

你有什么麻烦?你卡在哪里? – 2012-07-17 20:58:03

+2

StackOverflow可帮助您解决问题。这不是做你的整个工作/任务。 – Lion 2012-07-17 20:59:37

回答

2

试试这个:

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

demo

3

你只是提取textarea值 - 并使它们的连接成为这个'aggregate'textarea的值。这是很容易做到与jQuery,像这样:

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

的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); 
});​ 
0

使用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); 
0

您不需要加载像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

相关问题