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

Question

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

我的问题是,如果我保持占位符属性不变并且输入字段为空,则实际打印占位符,这不是很好.

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

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

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等)

隐藏的选择列表:使用CSS更改HTML5输入的占位符颜色