Webデザインをワンランクアップ！フォーカスで消えるスタイリッシュなプレースホルダー
フォーカス時にプレースホルダーテキストを自動非表示にする方法
CSSのみを使用する方法
CSSのみで実装するには、以下の擬似クラスを使用します。
input:focus::-webkit-placeholder {
opacity: 0;
}
input:focus:-moz-placeholder {
opacity: 0;
}
input:focus::-moz-placeholder {
opacity: 0;
}
input:focus:-ms-placeholder {
opacity: 0;
}
このCSSは、すべての主要なブラウザで動作しますが、Internet Explorer 10以前では動作しません。
jQueryを使用する場合は、以下のコードを使用します。
$(function(){
$('input').focus(function(){
$(this).attr('placeholder', '');
}).blur(function(){
$(this).attr('placeholder', '元のプレースホルダーテキスト');
});
});
このコードは、入力フィールドにフォーカスが当たると、placeholder属性を空文字に設定し、フォーカスが外れると元のプレースホルダーテキストに戻します。
どちらの方法が適しているか
CSSのみの方法は、よりシンプルで軽量です。一方、jQueryを使用する方法は、Internet Explorer 10以前を含むすべてのブラウザで動作し、プレースホルダーテキストを動的に変更するなどの高度な機能を追加することができます。
注意点
- 上記のコードは、プレースホルダーを非表示にするのみです。入力値をクリアする場合は、別の方法で処理する必要があります。
- 一部のブラウザでは、フォーカスが外れた後もプレースホルダーテキストが薄く残る場合があります。これは、ブラウザの仕様によるものです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プレースホルダー自動非表示</title>
<style>
input:focus::-webkit-placeholder {
opacity: 0;
}
input:focus:-moz-placeholder {
opacity: 0;
}
input:focus::-moz-placeholder {
opacity: 0;
}
input:focus:-ms-placeholder {
opacity: 0;
}
</style>
</head>
<body>
<input type="text" placeholder="名前を入力してください">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('input').focus(function(){
$(this).attr('placeholder', '');
}).blur(function(){
$(this).attr('placeholder', '元のプレースホルダーテキスト');
});
});
</script>
</body>
</html>
説明
このコードは、以下の内容を実行します。
- HTMLで、
placeholder属性を持つ入力フィールドを定義します。 - CSSで、入力フィールドにフォーカスが当たったときに
placeholderプロパティの透明度を0に設定します。これにより、プレースホルダーテキストが非表示になります。
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでHTMLファイルを開きます。
- 入力フィールドにフォーカスを合わせると、プレースホルダーテキストが自動的に非表示になることを確認します。
カスタマイズ
このコードは、ニーズに合わせてカスタマイズすることができます。
- プレースホルダーテキストの色やフォントを変更するには、CSSを使用します。
- 異なるタイプの入力フィールド (例：パスワードフィールド) でこの動作を有効にするには、jQueryセレクターを変更します。
- アニメーションを使用してプレースホルダーテキストをフェードイン/フェードアウトするには、JavaScriptを使用します。
フォーカス時にプレースホルダーテキストを自動非表示にするその他の方法
属性
HTML5には、placeholder属性の新しい機能として、autofocus属性が導入されました。この属性をinput要素に追加すると、ページロード時に自動的にそのフィールドにフォーカスが当てられ、同時にプレースホルダーテキストが非表示になります。
利点：
- 簡潔でエレガントなソリューション
- 追加のCSSやJavaScriptが不要
- ブラウザサポートが限られている (古いブラウザでは動作しない可能性がある)
- プレースホルダーテキストの再表示を制御できない
SVGアイコンを使用して、プレースホルダーテキストを視覚的に表現する方法があります。入力フィールドの上にSVGアイコンを配置し、フォーカス時にCSSを使用して非表示にすることができます。
- 高度なカスタマイズが可能
- 視覚的に魅力的なプレースホルダーを作成できる
- 複雑な実装
- パフォーマンスへの影響が懸念される
ライブラリ
BourbonやBootstrapなどのCSSフレームワークには、フォーカス時にプレースホルダーテキストを自動的に非表示にするユーティリティが含まれている場合があります。これらのライブラリを使用すると、コードを記述せずにこの機能を実装できます。
- 開発時間を短縮できる
- 既存のコードと簡単に統合できる
- ライブラリのサイズと複雑さが増す
- コードの可読性が低下する可能性がある
上記の方法に加えて、CSS3の::placeholder擬似要素を使用して、プレースホルダーテキストのスタイルを動的に変更することもできます。しかし、この方法は古いブラウザではサポートされていないため、注意が必要です。
最良の方法の選択
最適な方法は、プロジェクトの要件と制約によって異なります。シンプルで軽量なソリューションが必要な場合は、CSSのみのアプローチが適しています。一方、高度なカスタマイズ性と視覚的な魅力を必要とする場合は、SVGアイコンやライブラリの使用を検討してください。
どの方法を選択する場合も、アクセシビリティを考慮することが重要です。プレースホルダーテキストは、視覚障害者を含むすべてのユーザーにとって、フォームフィールドの目的を理解するのに役立ちます。代替テキストやラベルを使用して、プレースホルダーテキストの情報が失われないようにしてください。
jquery css html
