2012年7月25日水曜日

inputタグのplaceholderを全ブラウザで(jQuery)

  • このエントリーをはてなブックマークに追加

inputタグにplaceholderというものを設定してあげると、
下記の画像のようにどういう文字を入れてくださいといった内容を表示できる。

だけどhtml5から使用可能であるので、IE8とかのように対応していないブラウザでは使用できない。
そこでjQueryなどを使って実現できるものを作ってみた。

■JS部分

//メソッドの定義
$.fn.extend({
  defaultValue:function(str){
    return this.each(function(){
      if(this.value = ""){
        $(this).val(str);
        $(this).css("color","#969696");
      }
    });
  },
  defaultFocus:function(str){
    return this.each(function(){
      if(this.value = str){
        $(this).val("");
        $(this).css("color","#000000");
      }
    });
  },
  defaultBlur:function(str){
    return this.each(function(){
      if(this.value = ""){
        $(this).val(str);
        $(this).css("color","#969696");
      }
      if(this.value != str){
        $(this).css("color","#000000");
      }
    });
  }
});

$(document).ready(function(){
  //初期値の設定
  $("#targetInput").defaultValue("検索したい言葉を入れてください");

  //フォーカス、および離したときのイベントの設定
    $("#targetInput").bind({
    focus:function(e){
      $(this).defaultFocus("検索したい言葉を入れてください");
    },
    blur:function(e){
      $(this).defaultBlur("検索したい言葉を入れてください");
    }
  });
});
■html部分
<input type="text" id="targetInput">

こんな感じで書けばテキストエリアに検索したい言葉を入れてくださいと表示され、
クリックしたときには消え、離したときに値が空だったらデフォルト値が入り、
そうでなかったらそのまま残るといった仕様になる。

でも正直言うと早くIE7や8がなくなって、HTML5で書けるような時代が来てほしい。
そうすればコンボボックスやもっと便利なものがjavascriptを使わずに記述できるのに。

Adsense