プレースホルダー (placeholder) の表示とCSSでの装飾方法(5ページ目)

JavaScriptでプレースホルダ機能を作るソースのまとめ

これまでにご紹介したソースをまとめて掲載しておきます。コピー＆ペーストする際にご活用下さい。下記では、HTMLソースに続いてJavaScriptソースを記述しています。

<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>

<script type="text/javascript">
   // ▼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部分は、必ず「プレースホルダ機能を加えたいすべてのinput要素」よりも後に記述して下さい。JavaScript部分が先に実行されてしまうと、うまく動きません。

JavaScriptソースを別のファイルに分離しておきたい場合など、JavaScriptが実行されるタイミングを調整できない場合は、次のページでご紹介するソースを使って下さい。

すべてのソースのまとめ2へ >>