css - 将 HTML 发送到打印机后是否应该打印属性“占位符”的文本？

Question

我注意到在 Chrome 和 FireFox 中打印这个简单的 jsfiddle 的输出之间存在差异：

<input type="text" placeholder="Hello World" />

Google Chrome 似乎打印了“Hello World”文本，但 FireFox 没有。

查看HTML5 规范，我没有看到任何关于在打印期间对占位符采取的操作的描述。

这会根据浏览器实现而有所不同吗？还是在其他地方的规范中定义？有什么方法可以强制 FF 使用 JavaScript、CSS 或 HTML 打印占位符？

这是当我打印到 CutePDF 时，FireFox 没有呈现它。我可以确认它在打印到物理打印机时也不会呈现，但你必须相信我的话：

在此处输入图像描述

这是谷歌浏览器：

在此处输入图像描述

score 3 · Accepted Answer

首先，我想引导您阅读以下文章： http: //laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/仅使用充当“标签”的占位符可能不是一个好主意。

当然，如果你想在所有浏览器中打印占位符，你可以在过去的好日子里做一些事情。例子：

<div>
    <input type="text" placeholder="test">
    <span>test</span>
<div>

CSS

div{position:relative;}
span{position:absolute;top:0px;left:0px;display:none;}

打印 CSS

span{display:block;}

当然，如果您愿意，您可以使用 JavaScript 自动生成这些跨度。从占位符中获取值并span在 de 中创建div

score 0 · Accepted Answer

在最近的一篇文章 ( http://drublic.de/blog/printing-the-web/ ) 中，它被测试并提到了在打印站点时，许多 CSS 规则在每个浏览器中的执行方式不同。从您的测试中可以看出，这同样适用于一些较新的 html 属性。

当谈到placeholder打印时，我想象它类似于在 CSS 中设置样式，正如 Chris Coyier 指出的那样（http://css-tricks.com/snippets/css/style-placeholder-text/），需要供应商前缀，因为每个浏览器处理它的方式略有不同。

然而，正如这里和许多文章中提到的那样，placeholder文本应该补充现有标签，而不是单独依赖。因此，如果未显示（无论是在不受支持的浏览器中，还是在网站的打印副本中），都不会丢失可用性或信息。

2 回答 2