打印 Textarea 文本 - 全长(高度)? [英] Printing Textarea Text - Full Length (Height)?

问题描述

我有一个网络表单，我的客户希望用户能够打印出来.使用 CSS 进行一些样式设置时效果很好，但是，我有几个 textaear 字段.如果用户键入的内容超过 textarea 的高度，则打印时该类型将被截断.

I have a webform my client wants users to be able to print out. It works fine with a little styling using CSS, however, I have several textaear fields. If a user types more than the height of the textarea the type is cutoff when printed.

我在打印样式表中尝试过 textarea{height:100%;} 和 textarea{height:auto;} ，但都没有奏效.

I have tried textarea{height:100%;} and textarea{height:auto;} in the print stylesheet but neither of those works.

有没有办法将 textarea 字段的大小调整为仅打印版本的文本大小?如果可能，我更喜欢 CSS 解决方案，我可以将其插入到我的打印样式表中.如果这是不可能的，javascript 解决方案将起作用.

Is there a way to resize the textarea field to the size of the text for the print only version? I would prefer a CSS solution if possible that I can insert into my print stylesheet. If this isn't possible javascript solution would work.

截图对比:

注意:如果我不能只影响打印版本，我可以考虑使用 JS 自动调整 textarea 字段的大小有人在打字.

Note: If I cannot affect just the print version I can considered using JS to auto-resize the textarea field as someone is typing.

推荐答案

这对我有用(改编自 这个 JS 和 这个 jQuery):

This worked for me (adapted from this JS and this jQuery):

function resizeAndPrint() {   
    var _print = window.print;
    window.print = function() {
        $('textarea').each(function() {
            $(this).height($(this).prop('scrollHeight'));
        });
        _print();
    }
    window.print();
}

这篇关于打印 Textarea 文本 - 全长(高度)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！