Rimozione segnaposto di input su una versione stampabile di una pagina html

Question

Ho un modulo con campi di input. Ogni campo di input ha un attributo segnaposto. C'è anche un collegamento che mostra la versione stampabile dello stesso modulo.

Il mio problema è che se lascio l'attributo segnaposto invariato e il campo di input è vuoto, allora il segnaposto è effettivamente stampato, il che non è molto buono.

Sto cercando un modo per risolvere questo sfortunato comportamento. In questo momento, l'unica cosa che posso pensare è attraversare il DOM in javascript e rimuovere tutti gli attributi segnaposto quando viene fornita la versione stampabile. Ovviamente, quando si ritorna alla normale visualizzazione di pagina, anche gli attributi segnaposto devono essere ripristinati.

Questo non è difficile, ma non è molto elegante. Mi chiedo se c'è una soluzione migliore.

Answer 1

Nella maggior parte dei browser moderni, si dovrebbe essere in grado di nascondere i segnaposti quando si stampa, tramite alcuni selettori CSS non standard.

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

(o color: white, ecc) Lista

Selettore rubato da: Change an HTML5 input's placeholder color with CSS

Answer 2

o si può spostare al di fuori dell'area visibile dell'elemento genitore da text-trattino o qualche altro trucco overflowy