content from divs into textarea_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-09 21:57 出处：网络

I\'d like to transfer text from all div\'s with specific class to the textarea on the same page. How can I do that?

I'd like to transfer text from all div's with specific class to the textarea on the same page.

How can I do that?

for example:

< div class="test1" > Example1 < /div >
< div class="test2" > Example2 < /div >
< div class="test1" > Example3 < /div >
< div class="test3开发者_StackOverflow中文版" > Example4 < /div >

I would like to transfer the content of div class test1 and in the textarea should show "Example1" and "Example3".

Any help, please! javascript or php

john

This would be done pretty easily with jQuery:

var newTextVal = "";
$('.text1').each(
    function()
    {
       newTextVal += $(this).text();
    }
);
 $('textarea').val( newTextVal );

This above will loop through each element with class "text1" and append it's text node value to the text within the textarea.

If you're looking for pure javascript this would work - though things like this are very easily handled in frameworks like jQuery:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">

        function CopyDivsToTextArea()
        {
            var divs = document.getElementsByTagName("div");
            var textToTransfer = "";
            var pattern = new RegExp("test1");

           for(var i=0;i<divs.length;i++)
            {
            if(pattern.test(divs[i].className))
                {
                   textToTransfer += (divs[i].innerText || divs[i].textContent);
                }
             }
         document.getElementById("ta").value = textToTransfer;
        }

    </script>
</head>
<body>
<div class="test1" > Example1 </div >
<div class="test2" > Example2 </div >
<div class="test1" > Example3 </div >
<div class="test3" > Example4 </div >
<br />
<textarea id="ta" cols="50" rows="20"></textarea>
<br />
<input type="button" id="btn" value="Button" onclick="CopyDivsToTextArea();" />
</body>
</html>

you can simply do that by using jquery

$(document).ready(function(){
  $("#text").keyup(function(){
    var text = $("#text").val();
    $(".test").html(text);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<textarea id="text"></textarea>

I'd suggest using the "id" attribute for the divs instead of class. Basically, you would need to write a JavaScript function that uses GetElementById() or GetElementByObject().

Then define a button that calls that function passing it the id of the div and the id of the textarea. Finally, set the textarea object's value to the div object's value.

EDIT: Here's the function.

<script type="text/javascript">
function copyValues(idFrom, idTo) {
    var objFrom = document.getElementById(idFrom);
    var objTo = document.getElementById(idTo);

    objTo.value = objFrom.value
}
</script>

On the event you want it triggered:

copyValues("div1", "textarea1");
copyValues("div2", "textarea2");
copyValues("div3", "textarea3");

function copydivtext(){
   var x = document.getElementsByClassName('test1');

   var textarea = document.createElement("textarea");
   textarea.innerHTML = x[0].innerHTML + x[1].innerHTML;
   document.body.appendChild(textarea);
}
copydivtext();