javascript - 使用 jquery 形成预填充(使其可扩展)

Question

我有下面的 jquery，它基本上预填充了一个文本框。 (它实际上填充文本框上方的跨度，然后将其放置在文本框上方。然后单击跨度时，它会隐藏它并聚焦在文本框上。)这样我就不必添加预填充值到表单字段中，因此如果用户提交它不会提交填充的值。现在这似乎可行，但问题是我希望页面上的文本框都具有不同的预填充值。我试图找出一种方法来制作这种比例，所以我基本上只需要一个函数，并且根据文本框的 ID，它将不同的数据填充到上面的范围中。任何帮助都会很棒!

只为 1 个文本框工作 jquery 代码:(我真的不想为每个文本框一遍又一遍地编写这个函数

if($("#workphone").val().length == 0)
{
    var overlayCellPhone = $("<span class='prepopulation'>1234567890</span>");
    $("#workphone").parent().prepend(overlayCellPhone);


    $(".prepopulation").click(function(){
        $("#workphone").focus()
        $(".prepopulation").hide();
    });

    $("#workphone").blur(function(){
        if($("#workphone").val().length == 0)
        {
            $(".prepopulation").show();
        }

    });
}

Answer 1

HTML5 allows you to set placeholder text for input fields ，通过指定如下内容:

<input name="lol" placeholder="1234567890">

之后，使用 a jQuery plugin 在旧版浏览器上启用 placeholder。