1. ホーム
  2. jquery

[解決済み] jquery: カスタム属性の値を取得する

2022-03-07 22:36:19

質問

html5 では、placeholder 属性は input[type=text] しかし、非対応のブラウザに対応する必要があります。プレースホルダーのプラグインが1000個くらいあるのは知っているが、1001個目を作りたい。

を手に入れることができました。 input[placeholder] しかし、placeholder 属性の値を取得しようとすると、未定義が返されます。 $("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

解決方法は?

ここでは、何らかの形で反復する必要があります。 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");
});