ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

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

プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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で作る必要性はなさそうですが。ご都合の良い方法を、ぜひ活用してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 4
  • 5
  • 6
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます