web-dev-qa-db-ja.com

jquery：カスタム属性の値を取得

html5は_input[type=text]_要素のプレースホルダー属性をサポートしていますが、非準拠のブラウザーを処理する必要があります。プレースホルダーには数千のプラグインがあることは知っていますが、1001stを作成したいと思います。

_input[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

jquerycustom-attributesattr
44
bflemi3

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");
});
50
Dennis

Onclickイベントで関数を渡すことでこれを行うこともできます

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

<script type="text/javascript">

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

</script>
3
Prince Patel