JQuery 将 textarea 值复制到 div 中进行打印答案

【问题标题】：JQuery copy textarea value into a div for printingJQuery 将 textarea 值复制到 div 中进行打印
【发布时间】：2013-12-07 18:58:49
【问题描述】：

我正在尝试在很长的表单上设置 textareas 的打印样式。客户端需要能够打印页面（从任何浏览器），其中包含每个文本区域中显示的所有文本。我还没有找到任何使用纯 CSS 的方法（我尝试过溢出：可见和高度：自动/100% 属性，但都不起作用）所以我想知道如何使用 jquery 来完成此操作。

仅供参考，不会有点击功能或任何东西。我有屏幕显示的文本区域和它下面的隐藏 div。对于打印，我隐藏了 textarea 并显示了“forprint”div。所以我需要打印的 div 的值始终与 textarea 的值匹配。

<div class="forscreen">@Html.TextAreaFor(a => a.Subtitle, AdminOnlyAttribute(new Dictionary<string, object>() { { "class", "k-textbox" }, { "rows", "6" } }))</div>
<div class="forprint"></div>


.forprint {
    display: none;
}

@media print {
    .forprint {
        display: block;
        height: auto;
    }

    .forscreen {
        display: none;
    }
}

任何帮助将不胜感激！

编辑：当然，我在发布问题后不久就想通了。这是执行此操作的 jquery：

$('div textarea').focus(function () {
        var copyText = $(this).val();
        $(".forprint").html(copyText);
    });

现在，我想知道有没有一种方法可以为页面上的所有文本区域执行此操作，而无需为每个文本区域创建唯一的 ID 和函数？

【问题讨论】：

您是否有任何 javascript 在输入时将 textarea 内容复制到 div 中？或者你希望我们写那部分。
澄清一下，普通浏览器一般会隐藏div，但是一旦客户端点击打印，那么通过隐藏的div应该可以看到textarea中的文本？如果正确，那么您的 css 就可以了。只需使用 jquery 'attr' 工具从文本区域中提取文本并将其放入隐藏的 div 中。一旦用户点击打印，媒体打印 css 应该激活带有文本的 div。
您可能希望在模糊或更改上执行此操作，焦点不会在焦点发生后捕获更新。
啊，好酷。感谢帮助。关于我最后一个问题的任何想法？我不是 JS 专家或任何东西，所以我只是想知道最好的方法是什么。

标签： javascript jquery css printing textarea

【解决方案1】：

我很难得到你真正在做什么，但是一旦用户点击打印按钮，从所有文本区域获取文本，根据我的知之甚少，window.document 对象失去焦点 - 模糊事件。关注该事件以触发文本复制，我认为以下方法可以：

$(document).blur(function(e)
{
   var textObj = $("textarea").toArray();
   for(var i = 0; i<textObj.length; ++i)
   {
       var mytext = textObj[i].val();
       $(".forprint").append(mytext);
   }
}

您可能还想尝试使用 body 元素的 blur 事件。我希望这行得通。问候，一切顺利

【讨论】：