4/6 プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About

プレースホルダ機能を実現するJavaScriptを記述する

次に、各テキスト入力欄に対してプレースホルダ機能を加えるためのJavaScriptソースを記述します。先ほどのHTMLソースの後に、以下のように書き加えて下さい。

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

上記の24行のソースが「input要素のtitle属性値に記述された文字列をプレースホルダ用の文字列として使う機能」を実現するすべてです。前ページのHTMLソースの後に上記のJavaScriptソースを記述することで、プレースホルダ機能が完成します。このJavaScriptソースは全行をコピー＆ペーストするだけで使えます。特に修正が必須な箇所はありません。

プレースホルダ機能を実現するJavaScriptソースの解説

上記のJavaScriptソースの記述内容について、以下に簡単に解説しておきます。カスタマイズする際の参考にして下さい。

■class名が「placeholder」の要素を対象にしてプレースホルダ機能を加える
まず、ウェブページ内にあるinput要素のうち、プレースホルダ機能を加えたいinput要素を特定する必要があります。前ページでご紹介したように、プレースホルダ機能を加えたいinput要素には「class="placeholder"」という属性を加えるルールでした。したがって、下記の1行を記述することで「プレースホルダ機能を加えたいinput要素」のすべてが、変数targetsの中に配列として格納されます。

var targets = document.getElementsByClassName('placeholder');

もし、プレースホルダ機能の適用対象を示すclass名を変更したい場合は、上記の「placeholder」の部分を自由に書き換えて下さい。

この変数targetsに格納された「プレースホルダ機能を加えたいinput要素」を1つずつ処理するには、以下のようにfor文を使ってループさせれば良いだけです。

for (var i=0 ; i<targets.length ; i++) {
   ～～～
}

このfor文の内側に、以下の3つの処理を記述します。

フォーカスを得た際に、プレースホルダ文字列を消す処理。
フォーカスを失った際に、プレースホルダ文字列を表示する処理。
初期状態として、プレースホルダ文字列を表示する処理。

それぞれについて、以下に説明します。

■1. フォーカスを得た際の処理：
対象の要素がフォーカスを得た際(＝入力欄内にカーソルが入ったタイミング)の処理は、onfocusイベントに記述します。

targets[i].onfocus = function () {
   // プレースホルダが表示されていれば
   if( this.value == this.title ) {
      this.value='';                // プレースホルダの文字列を消す
      this.style.color = '#000000'; // 入力欄の文字色を黒色に戻す
   }
}

ここでは、対象のinput要素の「現在の入力内容(this.value)」と「title属性値(this.title)」を比較して、文字列が同じだったら消すという処理を実行しています。「文字列が同じ」ということは「プレースホルダの内容が入力されている状態」ということになります。また、入力欄内の文字色を黒色(#000000)に変更しています。

※ユーザが「プレースホルダとして指定されている文字列」と全く同じ文字列を入力した場合には、このスクリプトは「プレースホルダが表示されている」と認識してしまいます。したがって、このスクリプトを使う場合は、プレースホルダとしてはできるだけ「ユーザが入力しなさそうな文字列」を指定して下さい。記号などを含めておくと良いでしょう。

■2.フォーカスを失った際の処理：
対象の要素がフォーカスを失った際(＝入力欄内からカーソルが出たタイミング)の処理は、onblurイベントに記述します。

targets[i].onblur = function () {
   // 入力内容が空(またはプレースホルダと同じ文字列)なら
   if( this.value == '' || this.value == this.title ) {
      this.value = this.title;      // プレースホルダを表示
      this.style.color = '#808080'; // 文字色を灰色にする
   }
}

ここでは、input要素の「現在の入力内容(this.value)」が空だった場合には、「title属性値(this.title)」を入力して、入力欄内の文字色を灰色(#808080)に変更しています。これがプレースホルダ文字列を表示する処理です。

※上記のif文では、「入力内容が空の場合」だけでなく、「プレースホルダと同じ文字列が入力されている場合」も条件に加えています。これは、プレースホルダが表示されている状態でユーザがブラウザの再読込ボタンを押した場合の対策です。この条件を省略すると、プレースホルダが表示されている状態でユーザがブラウザの再読込ボタンを押すと、(ページの再読込時に入力欄の内容を保持する機能のあるブラウザでは)プレースホルダがデフォルトの文字色で表示されてしまいます。

■3.デフォルトの表示：
上記の1と2でonfocusイベントとonblurイベントの処理を記述しただけでは、「初期状態でプレースホルダを表示する」という処理が足りません。そこで、以下の1行を記述することで、「最初に1回だけonblurイベントの処理」を実行しておきます。

targets[i].onblur();

これによって、初期状態でプレースホルダが表示されます。

以上で、JavaScriptによるプレースホルダ表示機能は完成です。

最後に、これまでにご紹介したすべてのソースをまとめて掲載しておきます。コピーして使ってみる際にご活用下さい。なお、JavaScriptソースの記述位置には制限がありますので注意して下さい。詳しくは次のページで解説しています。

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