THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
プレースホルダー
placeholder
カスタムデータ属性

先日エントリーした内容で、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("");   
      }
    });
  });
});

カスタムデータ属性とjQuery

以前の別のエントリーでも紹介してましたけど、jQueryを使うと、カスタムデータ属性を簡単に扱うことができます。

$('セレクタ').data('◯◯');と書くことで、「data-◯◯="値"」の値を取得することができます。何気に便利!

以上、jQueryとカスタムデータ属性を利用してプレースホルダーを実装する方法でした。そんなに難しくない、ハズ(汗)

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/211410945
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。