JQuery: получить значение пользовательского атрибута - PullRequest
Новая
       8

JQuery: получить значение пользовательского атрибута

42 голосов
/ 24 августа 2011

html5 поддерживает атрибут placeholder для элементов input[type=text], но мне нужно работать с несовместимыми браузерами.Я знаю, что есть тысяча плагинов для заполнителя, но я бы хотел создать 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

Ответы [ 2 ]

49 голосов
/ 24 августа 2011

Вам нужна некоторая форма итерации, поскольку 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");
});
3 голосов
/ 10 марта 2017

Вы также можете сделать это, передав функцию с событием onclick 

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

<script type="text/javascript">

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

</script>
...