Removing input placeholder on a printable version of an html page

Question

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.

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.

Answer 1

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

(or color: white, etc.)

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

Answer 2

or you can move it outside the visible area of the parent element by text-indent or some other overflowy hack