JavaScriptでプレースホルダ機能を作るソース2
JavaScriptソースを別のファイルに分離しておきたい場合など、JavaScriptが実行されるタイミングを調整できない場合は、下記のソースを使って下さい。■HTMLソース：
<p> 項目1：<input value="" title="数値1を入力" class="placeholder" type="text"> <br> 項目2：<input value="" title="数値2を入力" class="placeholder" type="text"> <br> 項目3：<input value="" title="数値3を入力" class="placeholder" type="text"> <br> 項目4：<input value="" title="数値4を入力" class="placeholder" type="text"> <br> 項目5：<input value="" title="数値5を入力" class="placeholder" type="text"> <br> 項目6：<input value="" title="数値6を入力" class="placeholder" type="text"> <br> </p>
■JavaScriptソース(HTMLから独立したファイルに記述しても可)：
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// ▼class名が「placeholder」の要素を対象にしてプレースホルダ機能を加える
var targets = document.getElementsByClassName('placeholder');
for (var i=0 ; i<targets.length ; i++) {
// ▼1.フォーカスを得た際の処理：
targets[i].onfocus = function () {
// プレースホルダが表示されていれば
if( this.value == this.title ) {
this.value=''; // プレースホルダの文字列を消す
this.style.color = '#000000'; // 入力欄の文字色を黒色に戻す
}
}
// ▼2.フォーカスを失った際の処理：
targets[i].onblur = function () {
// 入力内容が空(またはプレースホルダと同じ文字列)なら
if( this.value == '' || this.value == this.title ) {
this.value = this.title; // プレースホルダを表示
this.style.color = '#808080'; // 文字色を灰色にする
}
}
// ▼3.デフォルトの表示：
targets[i].onblur();
}
});
</script>
このJavaScriptは、いつ読み込まれたとしてもHTMLの読み込み完了後に実行されます。そのため、対象のinput要素が読み込まれるよりも前に読み込まれても問題ありません。前のページでご紹介したソースと異なる点は、下記の部分です。
document.addEventListener('DOMContentLoaded', function() {
～～～
});
この内側に記述したスクリプトは、HTMLの読み込み完了後に実行されます。「HTMLソースの読み込み完了後」であって、「ウェブページ上にある画像などのオブジェクトの読み込み完了後」ではありません。したがって、サイズの大きな画像が掲載されているページなどのように、読み込み待ち時間の長いページであっても、「なかなかスクリプトが実行されない」ということはないでしょう。上記のソースを使ったサンプルページは「プレースホルダJavaScript版」です。お使いのブラウザで動作を確認してみたい場合には、このサンプルページをご覧下さい。
テキスト入力欄に案内文字(プレースホルダ)を表示する方法
今回は、テキスト入力欄が空のときにプレースホルダを表示する方法として、HTML5のplaceholder属性で作る方法と、JavaScriptで作る方法の2種類をご紹介致しました。HTML5のplaceholder属性を使う方法が圧倒的に簡単なので、もはやわざわざJavaScriptで作る必要性はなさそうですが。ご都合の良い方法を、ぜひ活用してみて下さい。【関連記事】
