javascript - I want to set placeholder to textbox using data-* attribute in html using jQuery? - Stack Overflow

admin管理员组

文章数量:1347712

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

Share Improve this question Follow edited Oct 31, 2013 at 6:25 Tushar Gupta - curioustushar 57.1k2424 gold badges106106 silver badges109109 bronze badges asked Oct 31, 2013 at 6:22 ArulArul 49122 gold badges44 silver badges1414 bronze badges 6

• 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

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

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/

本文标签： javascriptI want to set placeholder to textbox using data* attribute in html using jQueryStack Overflow