使用 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

它应该看起来像这样：

var holders = {
  "phone": "1234567890",
  "email": "[email protected]"
  };
$(":text").each(function(){
  var id = this.id, $input = $(this);
  if(typeof holders[id] != 'undefined') {
    var $holder = $("<span class='prepopulation'>" + holders[id] + "</span>");
    if ($input.val().length != 0) $holder.hide();
    $input.parent().prepend($holder);
    $holder.click(function(){
      $input.focus()
      $holder.hide();
    });
    $input.blur(function(){
      if($input.val().length == 0) {
        $holder.show();
      }
    });
  }
});

Answer 2

HTML5 允许您为输入字段设置占位符文本，方法是指定如下内容：

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

之后，使用 < a href="https://github.com/mathiasbynens/Placeholder-jQuery-Plugin" rel="nofollow">一个 jQuery 插件，用于在旧版浏览器上启用占位符。