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

Question

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

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

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

这并不难，但也不是很优雅。请问有没有更好的解决办法。

Answer 1

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