打印样式表 - 将输入转换为文本 [英] Print Stylesheet - Converting inputs to text

问题描述

我有一个表，其中有一些< input type =text> 框，我希望这些在打印时显示为正常文本。我已经设置了一个media =print样式表与

I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with

input
{
border-style: none;
}

，这样会删除边框，所以内容看起来像文本，但输入仍然将列的宽度推到它的实际宽度（不意外），所以我得到不必要的空白空间和列宽度。有没有一种有趣的方式，以某种方式设置输入的宽度到其内容大小使用CSS，或一些其他的方式来解决这个问题？

in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?

有人在另一个论坛建议使用打印按钮，创建客户端脚本以物理地更改页面标记，但不幸的是，由于页面的复杂性和动态性质，这不是真正的实用。

Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.

这不可能，但我想我会问。

I'm pretty sure this can't be done, but I thought I'd ask.

推荐答案

不，我不认为这可以完成没有一些脚本。但是，使用像Jquery这样的框架很容易实现脚本：

Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:

• 对于每个输入元素， code>< span> 旁边，并给它一个隐藏在 media =screen样式表中的类，显示在 media =print中。

• For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".

输入元素本身会得到一个类别，在屏幕隐藏在打印。

The input element itself would get a class that works the other way round, visible in screen and hidden in print.

每个输入元素都会获得 code>事件更新相邻的 span 。

Each input element would get a change event that updates the neighboring span.

我没有JQuery例程，没有把它从我的袖子，它现在在一起，但它是绝对可解，仍然相当不显眼 - 无需在用户开始打印时执行任何脚本。

I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.

我打赌，如果你重新标记问题或问一个新的，一个我们的常驻JQuery大师会看看它：）

I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)

这篇关于打印样式表 - 将输入转换为文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！