在 html 页面的可打印版本上删除输入占位符 [英] Removing input placeholder on a printable version of an html page

问题描述

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

I have a form with input fields. Each input field has a placeholder attribute. There is also a link displaying the printable version of the same form.

我的问题是，如果我不改变占位符属性，输入字段为空，那么占位符实际上是打印出来的，不太好.

My problem is that if I leave the placeholder attribute unchanged and the input field is empty, then the placeholder is actually printed, which is not very good.

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

I am looking for a way to resolve this unfortunate behavior. Right now, the only thing I can think of is traverse the DOM in javascript and remove all the placeholder attributes when the printable version is given. Of course, when reverting back to the normal page view, the placeholder attributes must be restored too.

这并不难，但也不是很优雅.不知道有没有更好的解决办法.

This is not hard, but is also not very elegant. I wonder if there is a better solution.

推荐答案

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

In most modern browsers, you should be able to hide placeholders when printing, via some non-standard CSS selectors.

@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;
  }
}

(或颜色:白色等)

从以下位置窃取的选择器列表:使用 CSS 更改 HTML5 输入的占位符颜色

Selector list stolen from: Change an HTML5 input's placeholder color with CSS

这篇关于在 html 页面的可打印版本上删除输入占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！