css - 打印样式表 - 将输入转换为文本

Question

我有一张 table ，上面有一些 <input type="text">其中的框，我希望这些在打印时显示为普通文本。我已经用

设置了一个 media="print"样式表

input
{
border-style: none;
}

在其中，这会删除边框，因此内容看起来就像文本，但输入仍在将列的宽度推到其实际宽度(不足为奇)，因此我得到了不必要的空白空间和列宽。有没有一种时髦的方法可以使用 CSS 以某种方式将输入的宽度设置为它的内容大小，或者有其他方法来解决这个问题？

其他论坛上有人建议使用创建客户端脚本的打印按钮来物理更改页面标记，但不幸的是，由于页面的复杂性和动态特性，这并不实用。

我很确定这不可能完成，但我想我会问。

Answer 1

不，我不认为如果没有一些脚本就可以做到这一点。但是使用像 Jquery 这样的框架可以很容易地实现脚本:

• 对于每个输入元素，您将创建一个 <span>在它旁边并给它一个隐藏在 media="screen" 中的类样式表，可见于 media="print" .

• 输入元素本身将获得一个以相反方式工作的类，在 screen 中可见并隐藏在 print 中.

• 每个输入元素都会得到一个 change更新相邻 span 的事件.

我还没有 JQuery 例程来把它从我的袖子里拉出来，现在还不是时候把它放在一起，但它绝对是可以解决的，而且仍然很不引人注目——当用户使用时不需要执行任何脚本开始打印。

我敢打赌，如果您重新标记问题或提出新问题，我们的一位常驻 JQuery 专家会看一看 :)