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

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

我的问题是，如果我保持占位符属性不变，并且输入字段为空，那么占位符实际上是打印出来的，这不是很好

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

---

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

在大多数现代浏览器中，您应该能够通过一些非标准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;
  }
}

颜色：白色等

---

选择器列表被盗自：

或者您可以通过文本缩进或其他溢出攻击将其移动到父元素的可见区域之外

2和3之间的区别是什么？2：伪选择器。3：伪元素。2可以应用于其他元素a:-moz占位符，3不能。如果你想支持FF 4和更高版本，你需要两者。这在IE 11中不起作用。IE似乎会覆盖透明和白色，以确保文本和其他颜色按预期工作，但当然不会隐藏文本。到目前为止，我找到的唯一解决方案是不透明度：0，但这也隐藏了文本框本身。：：显示的占位符似乎是最新版本，根据别忘了文本阴影：无；如适用。