Usuwanie symbolu zastępczego na drukowalnej wersji strony html

Question

Mam formularz z polami wprowadzania. Każde pole wejściowe ma atrybut zastępczy. Istnieje również link wyświetlający wersję do wydrukowania tego samego formularza.

Mój problem polega na tym, że jeśli pozostawię atrybut zastępczy bez zmian, a pole wejściowe jest puste, to zostanie wydrukowany symbol zastępczy, co nie jest zbyt dobre.

Szukam sposobu na rozwiązanie tego niefortunnego zachowania. W tej chwili jedyne co mogę wymyślić to przechodzenie przez DOM w javascript i usuwanie wszystkich atrybutów symboli zastępczych po podaniu wersji do druku. Oczywiście po przywróceniu normalnego widoku strony należy również przywrócić atrybuty zastępcze.

To nie jest trudne, ale nie jest zbyt eleganckie. Zastanawiam się, czy istnieje lepsze rozwiązanie.

Answer 1

W większości nowoczesnych przeglądarek, powinieneś być w stanie ukryć symbole zastępcze podczas drukowania, poprzez niektóre niestandardowe selektory 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; 
    } 
} 

(lub color: white, itd.) Lista

Selector skradzione: Change an HTML5 input's placeholder color with CSS

Answer 2

lub można go przenieść poza widzialnym obszarze elementu nadrzędnego przez text-indent lub innego overflowy siekać