I want to set placeholder using data-* attribute. I tried with jQuery. but not working. if i use id instead of all input type. its working.

but i want mon code to set placeholder for any input text fields in a page.

html:

<p>Login</p>
<input type="text" data-placeholder="Email" id="txtemail" />
<input type="password" data-placeholder="Password" id="txtpass" />

jQuery:

foctext = $('input:text').attr("data-placeholder");
$(this).val(foctext);
$(this).focus(function () {
    if ($(this).val() == foctext) {
        $(this).val("");
    }
});
$(this).blur(function () {
    if ($(this).val() == "") {
        $(this).val(foctext);
    }
});

please write correct solution for this. thank you

I want to set placeholder using data-* attribute. I tried with jQuery. but not working. if i use id instead of all input type. its working.

but i want mon code to set placeholder for any input text fields in a page.

html:

<p>Login</p>
<input type="text" data-placeholder="Email" id="txtemail" />
<input type="password" data-placeholder="Password" id="txtpass" />

jQuery:

foctext = $('input:text').attr("data-placeholder");
$(this).val(foctext);
$(this).focus(function () {
    if ($(this).val() == foctext) {
        $(this).val("");
    }
});
$(this).blur(function () {
    if ($(this).val() == "") {
        $(this).val(foctext);
    }
});

please write correct solution for this. thank you

• javascript
• jquery
• html

• 1 Why are you not using <input type="text" placeholder="Email" id="txtemail" /> – Jashwant Commented Oct 31, 2013 at 6:28
• 1 Place holder atribute will not work on IE versions prior to 10 – 웃웃웃웃웃 Commented Oct 31, 2013 at 6:29
• i think this link is showing what you are trying to do. remember HTML5 does this already in most new browsers. Note in the link the ability to add this functionality when its missing. davidwalsh.name/html5-placeholder – Thomas Harris Commented Oct 31, 2013 at 6:32
• Also setting value in password will not display the text.It will be shown as ****** – 웃웃웃웃웃 Commented Oct 31, 2013 at 6:32
• But, we should use placholder attribute for good browsers and then fallback to js implementation for ie's. He can have the same logic even with placeholder as the attribute. – Jashwant Commented Oct 31, 2013 at 6:33

3 Answers 3

I guess you can use jQuery .data() selector - read more here - http://api.jquery./data/

$(document).ready(function(){
  $('input[type=text]').each(function(){
    var txt = $(this).data('placeholder');
    $(this).attr('placeholder', txt);
  });
});

Use this code :

$('input:text').each(function(){
    var placeholder = $(this).data('data-placeholder');
    $(this).attr('placeholder', placeholder);
});

Hi try this way,

<p>Login</p>
<input type="text" data-placeholder="Email" id="txtemail" />
<input type="text" data-placeholder="Password" id="txtpass" data-type="password" />


$.each($('input:text, input:password'), function(key, value){
    $(this).val($(this).attr("data-placeholder"));
    $(this).focus(function(){
        if($(this).attr("data-placeholder") == $(this).val()){
            if($(this).attr('data-type') == "password"){
                $(this).attr('type', 'password')
            }
            $(this).val('');
        }
    });
    $(this).blur(function(){
        if($(this).val() == "" ){
            $(this).val($(this).attr("data-placeholder"));
        }
        if($(this).attr("data-placeholder") == $(this).val()){
            $(this).attr('type', 'text')
    } 
    });
});

See jsFiddle sample http://jsfiddle/sakNy/2/