javascript - 我想使用 jQuery 在 html 中使用 data-* 属性将占位符设置为文本框？

Question

我想使用 data-* 属性设置占位符。我尝试使用 jQuery。但不工作。如果我使用 id 而不是所有输入类型。它的工作。

但我希望通用代码为页面中的任何输入文本字段设置占位符。

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);
    }
});

请为此编写正确的解决方案。谢谢你

Answer 1

我想你可以使用 jQuery .data() 选择器 - 在这里阅读更多 - http://api.jquery.com/data/

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

Answer 2

Use this code :

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

Answer 3

你好试试这个方法

<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')
    } 
    });
});

请参阅 jsFiddle 示例http://jsfiddle.net/sakNy/2/