jQueryとカスタムデータ属性を利用してプレースホルダーを実装する方法

2011/06/23

カテゴリ：: jQuery

タグ：: jquery; プレースホルダー; placeholder; カスタムデータ属性

【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない？

jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用　機能追加編

先日エントリーした内容で、inputの内容でプレースホルダーとして「キーワードを入力」という文字のみを表示させていたのですが、input要素それぞれに実装する場合、それぞれのinputで任意の文字列を入れれるようにしておきたいですよね。

HTML5で実装されるplaceholdeが全ブラウザで利用できたらいいんですけど、表示されないブラウザもあるので、jQueryとカスタムデータ属性を使って実装してみました。

任意の値をカスタムデータ属性で

別にカスタムデータ属性を使わずともいいのですが、今回は利用しております。data-placeholder="◯◯"とすることで、その文字列を表示させるようにしています。

input data placeholder - jsdo.it - share JavaScript, HTML5 and CSS

javaScriptソース

上に表示しているjsdo.itでもソースは見れますが、解説用としてここでも別途かいておきます。

jQuery(function($){
  //テキスト入力のinput全部で、プレースホルダー文字列表示
  $(':text[value=""]').each(function(){
  
    //data-placeholder="◯◯"の文字列をvalueに入れ、薄色文字になるclassを付加
    $(this).val($(this).data('placeholder')).addClass('notentered');
  }); 
  
  //入力にフォーカスがあれば 
  $(":text").focus(function(){   
      //まずは薄色文字にしていたclassを削除
      $(this).removeClass('notentered');
      
      //プレースホルダー文字列のままであればvalueに入れておいた文字列を除去
      if(this.value === $(this).data('placeholder')){   
        $(this).val("");   
      }
  
  //フォーカスが外れたら
  }).blur(function(){  
  
    //もし入力がなく空のままであれば再びプレースホルダーの文字表示 
    if(this.value === ""){   
      $(this).val($(this).data('placeholder')).addClass('notentered');  
    }
  });
  
  //submitなどのボタンを押したら実行する（例では単なるボタン）
  $("#valueClear01").click(function(){
  
    //inputのvalueがプレースホルダーと同じままであれば削除
    $(":text").each(function(){
      if(this.value === $(this).data('placeholder')){   
        $(this).val("");   
      }
    });
  });
});