从 div 到 textarea 的内容答案

【问题标题】：content from divs into textarea从 div 到 textarea 的内容
【发布时间】：2009-11-02 23:36:19
【问题描述】：

我想将文本从具有特定类的所有 div 传输到同一页面上的 textarea。

我该怎么做？

例如：

&lt div class="test1" &gt 示例1 &lt /div &gt
&lt div class="test2" &gt 示例2 &lt /div &gt
&lt div class="test1" &gt 示例 3 &lt /div &gt
&lt div class="test3" &gt Example4 &lt /div &gt

我想传输div类test1的内容并且在 textarea 中应该显示“Example1”和“Example3”。

任何帮助，请！ javascript或php

约翰

【问题讨论】：

标签： php javascript html copy textarea

【解决方案1】：

使用 jQuery 很容易做到这一点：

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

上面的代码将遍历每个带有“text1”类的元素，并将其文本节点值附加到文本区域内的文本中。

【讨论】：

这看起来可以改进。我建议将值存储在字符串或字符串数组中，并仅在末尾设置 textarea 值，而不是每次在循环中重新分配它。

【解决方案2】：

如果您正在寻找纯 javascript，这将是可行的 - 尽管这样的事情在 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>

【讨论】：

我喜欢不依赖库，但是 if(divs[i].className == "test1") 行有一个脆弱性：元素可以有多个 CSS 类，所以你应该使用正则表达式或等效的而不是简单的相等比较。此外，innerHTML 可能是错误的选择，因为您最终可能会在 textarea 中出现不需要的 HTML 标记。您可以改用innerText / textContent：textToTransfer += (divs[i].innerText || divs[i].textContent);。 innerText 和 textContent 并不完全等同，但可能已经足够了。
好点蒂姆，更新了示例 - 只是我拼凑起来的东西，没有 100% 审查所有场景。谢谢！

【解决方案3】：

你可以简单地使用 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>

【讨论】：

我认为你误解了这个问题。

【解决方案4】：

我建议对 div 使用“id”属性而不是类。基本上，您需要编写一个使用 GetElementById() 或 GetElementByObject() 的 JavaScript 函数。

然后定义一个调用该函数的按钮，将 div 的 id 和 textarea 的 id 传递给它。最后，将 textarea 对象的值设置为 div 对象的值。

编辑：这是函数。

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

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

在您希望触发的事件上：

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

【讨论】：

这意味着要为页面上的每个 div 重新调用 copyValues。这可能会很快失控。

【解决方案5】：

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();

【讨论】：

我认为这足以将 div 内容传输到 textarea 而无需任何循环。并用脚本创建了文本区域。