Как я могу получить значение атрибута placeholder с помощью jquery?

Я пытаюсь получить значение атрибута placeholder и делаю fadeIn с меткой, которая имеет значение placeholder как значение for, но не работает.

HTML:

<html>  
    <body>
        <form>
            <input type="text" id="name" name="name" placeholder="First Name" />
            <label for="First Name">First Name </label>
        </form>
    </body>
</html>

CSS:

input+label { display: none; }

Script

$(document).ready(function() {
    $('input[type="text"]').click(function() {  
        var sd = $(this).attr('placeholder');  
        $('label[for^=sd]').fadeIn();  
    });  
});

Ответы

Ответ 2

Вы выбираете буквенную строку "sd", а не значение вашей переменной. Попробуйте следующее:

var sd = $(this).attr('placeholder');
$('label[for^="' + sd + '"]').fadeIn();

Ответ 3

Вероятно, вы хотите:

$('label[for^="' + sd + '"]').fadeIn();

Вы также не используете <label for="..."> правильно [doc]. Атрибут for для <label> должен ссылаться на атрибут <input> id, а не на его атрибут placeholder. Вероятно, вам будет интересно изменить код:

<label for="name">First Name</label>

и

var id = $(this).attr('id');
$('label[for^="' + id + '"]').fadeIn();

Ответ 4

Если вы пытаетесь убрать местозаполнитель ввода, когда пользователь сфокусирован на нем, а затем снова появляется при удалении фокуса, это сработало хорошо.

  $('#inputRanges input').on('focus', function(){
                if(!$(this).data('placeholder')){
                    $(this).data('placeholder', $(this).attr('placeholder'));
                }
                $(this).attr('placeholder', "");
            }).on('focusout', function(){
                if($(this).val()==""){
                    $(this).attr('placeholder', $(this).data('placeholder'));
                }
            });

Ответ 5

Я думаю, что ваша строка селектора для метки неверна $('label[for="'+sd+'"]').fadeIn();

Ответ 6

Если метка всегда будет рядом с входом (как показывает селектор CSS), вы можете попробовать:

$(function(){
    $(":text").bind("focus", function(){
        $(this).next().fadeIn();
    });
});

и вообще пропустить атрибут placeholder. Также привязка к "фокусу" может быть лучше, чем "click"