私は入力フィールドを持つフォームを持っています。各入力フィールドにはプレースホルダ属性があります。 同じフォームの印刷可能なバージョンを表示するリンクもあります。印刷可能なhtmlページのプレースホルダーの削除
私の問題は、プレースホルダ属性を変更せずに入力フィールドを空白にしておくと、プレースホルダが実際に印刷されてしまうことです。これはあまり良くありません。
私はこの不幸な動作を解決する方法を探しています。今、私が考えることができるのは、JavaScriptがDOMをたどり、印刷可能なバージョンが与えられたときにすべてのプレースホルダ属性を削除することだけです。もちろん、通常のページビューに戻すときは、プレースホルダの属性も復元する必要があります。
これは難しくありませんが、それほどエレガントではありません。より良い解決策があるのだろうかと思います。
最新のブラウザでは、非標準の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など）
セレクタリストから盗まれた：Change an HTML5 input's placeholder color with CSS
またはテキストインデントまたはいくつかの他のoverflowyハックによって親要素の可視領域の外側に移動することができます
2と3の違いは何ですか？ – mark
2：擬似セレクタ。 3：擬似要素。 2は他の要素（a：-moz-placeholder）にも適用できますが、3ではできません。 FF 4以降をサポートしたい場合は、両方とも必要です。 –
ハウリーウシ。できます。 – mark