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

Posted 2023-05-07

【中文标题】JQuery 将 textarea 值复制到 div 中进行打印

【英文标题】：JQuery copy textarea value into a div for printing

【发布时间】：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 专家或任何东西，所以我只是想知道最好的方法是什么。

【参考方案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 事件。我希望这行得通。问候，一切顺利