2011-08-24 25 views
27

html5はinput[type=text]要素のプレースホルダ属性をサポートしていますが、非対応ブラウザを処理する必要があります。プレースホルダには数千のプラグインがありますが、私は1001stを作成したいと思います。jquery:カスタム属性の値を取得

input[placeholder]要素でハンドルを取得できましたが、プレースホルダ属性の値を取得しようとするとundefined-$("input[placeholder]").attr("placeholder")が返されます。

私はjquery 1.6.2を使用しています。

ここにはjsfiddleがあります。テスト目的のためだけにhtml5と互換性のあるブラウザで動作するようにコードを修正しました。任意およびすべてのヘルプのための

HTML

<input type="text" name="email" size="10" placeholder="EMAIL ADDRESS"> 

jqueryの

function SupportsInputPlaceholder() { 
    var i = document.createElement("input"); 
    return "placeholder" in i; 
} 

$(document).ready(function(){ 
    if(!SupportsInputPlaceholder()) { 
     //set initial value to placeholder attribute 
     $("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

     //create event handlers for focus and blur 
     $("input[placeholder]").focus(function() { 
      if($(this).val() == $(this).attr("placeholder")) { 
       $(this).val(""); 
      } 
     }).blur(function() { 
      if($(this).val() == "") { 
       $(this).val($(this).attr("placeholder")); 
      } 
     }); 
    } 
}); 

おかげで、 B

答えて

38

あなたは機能と呼ばれる場合を除き、val(として、ここでは反復のいくつかのフォームを必要とします)は、最初の要素に対してのみ機能します。

$("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

は次のようになります。

$("input[placeholder]").each(function() { 
    $(this).val($(this).attr("placeholder")); 
}); 

または

$("input[placeholder]").val(function() { 
    return $(this).attr("placeholder"); 
}); 
+2

なりません '$("入力[プレースホルダ] ").val(function(){return $(this).attr("プレースホルダ "); }); 'よろしいですか? –

+0

デニスに感謝します。それぞれにブレークポイントを設定すると、そのセレクタに一致する要素が見つからないような、関数にも入っていないことがわかりました。しかし、私が$( "input [placeholder]")。val()に時計を置くと、私は要素を初期値に渡します。 – bflemi3

+0

@リチャードええ、もう少し良いです。おそらくそれほど多くの違いは考えられません。 bflemi3、あなたはどんなブラウザを使っていますか?あなたのコードはChromeとIE7で動作します – Dennis

1
また、onclickのイベントに機能を渡すことによってこれを行うことができます

<a onlick="getColor(this);" color="red"> 

<script type="text/javascript"> 

function getColor(el) 
{ 
    color = $(el).attr('color'); 
    alert(color); 
} 

</script> 
関連する問題