15

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

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

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

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

4

2 回答 2

19

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

选择器列表窃取自：使用 CSS 更改 HTML5 输入的占位符颜色

于 2013-05-11T03:22:27.313 回答
2

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

于 2015-02-07T07:14:44.530 回答