删除 html 页面的可打印版本上的输入占位符

Posted 2023-03-05

【中文标题】删除 html 页面的可打印版本上的输入占位符

【英文标题】：Removing input placeholder on a printable version of an html page

【发布时间】：2013-05-05 19:02:24

【问题描述】：

我有一个带有输入字段的表单。每个输入字段都有一个占位符属性。 还有一个链接显示同一表格的可打印版本。

我的问题是，如果我保持placeholder属性不变，输入字段为空，那么placeholder实际上是打印出来的，不是很好。

我正在寻找解决这种不幸行为的方法。现在，我唯一能想到的就是在 javascript 中遍历 DOM，并在给出可打印版本时删除所有占位符属性。当然，当恢复到正常的页面视图时，占位符属性也必须恢复。

这并不难，但也不是很优雅。我想知道是否有更好的解决方案。

【参考方案1】：

或者您可以通过 text-indent 或其他一些溢出的 hack 将其移到父元素的可见区域之外

【参考方案2】：

在大多数现代浏览器中，您应该能够在打印时通过一些非标准 CSS 选择器隐藏占位符。

@media print 
  ::-webkit-input-placeholder  /* WebKit browsers */
      color: transparent;
  
  :-moz-placeholder  /* Mozilla Firefox 4 to 18 */
      color: transparent;
  
  ::-moz-placeholder  /* Mozilla Firefox 19+ */
      color: transparent;
  
  :-ms-input-placeholder  /* Internet Explorer 10+ */
      color: transparent;
  

（或color: white等）

选择器列表窃取自：Change an html5 input's placeholder color with CSS

【讨论】：

2和3有什么区别？

2：伪选择器。 3：伪元素。 2 可以应用于其他元素（a:-moz-placeholder），3 不能。如果您想支持 FF 4 及更高版本，则两者都需要。

这在 IE 11 中不起作用。似乎 IE 覆盖了 transparent 和 white 以确保文本收缩（其他颜色按预期工作，但当然不要隐藏文本）。到目前为止我找到的唯一解决方案是opacity: 0，但这也隐藏了文本框本身。

::placeholder-shown 似乎是最新版本，CSS tricks

如果适用，不要忘记text-shadow:none;。