Удаление ввода-заглушки на печатной версии html-страницы

У меня есть форма с полями ввода. Каждое поле ввода имеет атрибут placeholder. Существует также ссылка, отображающая версию для печати той же формы.

Моя проблема заключается в том, что если я оставляю атрибут placeholder неизменным, а поле ввода пуст, то заполнитель будет напечатан, что не очень хорошо.

Я ищу способ решить это неудачное поведение. Прямо сейчас, единственное, что я могу придумать, - пересечь DOM в javascript и удалить все атрибуты placeholder, когда дана версия для печати. Разумеется, при возврате к нормальному просмотру страницы атрибуты-заполнители также должны быть восстановлены.

Это не сложно, но также не очень элегантно. Интересно, есть ли лучшее решение.

Ответ 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 и т.д.)

Список селекторов, украденный из: Изменение цвета заполнителя ввода HTML5 с помощью CSS

Ответ 2

или вы можете переместить его за пределы видимой области родительского элемента с помощью текстового отступа или другого переполненного хака