Javascript 使用jquery进行表单预填充（使其可伸缩）

下面是jquery，它基本上预先填充了一个文本框。（它实际上会在文本框上方填充一个跨距，然后将其放置在文本框上方。单击跨距时，它会将其隐藏并聚焦在文本框上。）这样，我就不必将预填充的值添加到表单字段中，因此如果用户提交，它就不会提交填充的值。现在，这似乎是工作，但问题是我有关于文本框的页面上，我想有这个功能，所有不同的预填充值。我正试图找出一种方法来实现这个比例，所以我基本上只需要一个函数，根据文本框的ID，它会将不同的数据填充到上面的跨度中。任何帮助都会很好

只为一个文本框使用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();
        }

    });
}

if（$（“#工作电话”）.val（）.length==0）
{
var OverlyCellphone=$（“1234567890”）；
$（“#工作电话”）.parent（）.prepend（覆盖电话）；
$（“.prepopulation”）。单击（函数（）{
$（“#工作电话”）.focus（）
$（“.prepopulation”）.hide（）；
});
$（“#工作电话”）.blur（函数（）{
if（$（“#工作电话”）.val（）.length==0）
{
$（“.prepopulation”）.show（）；
}
});
}

它应该是这样的：

var holders = {
  "phone": "1234567890",
  "email": "address@domain.com"
  };
$(":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();
      }
    });
  }
});

var持有人={
“电话”：“1234567890”，
“电子邮件”：address@domain.com"
};
$（“：text”）。每个（函数（）{
var id=this.id，$input=$（this）；
if（持有者类型[id]！=“未定义”）{
var$holder=$（“”+holders[id]+“”）；
如果（$input.val（）.length！=0）$holder.hide（）；
$input.parent（）.prepend（$holder）；
$holder.单击（函数（）{
$input.focus（）
$holder.hide（）；
});
$input.blur（函数（）{
如果（$input.val（）.length==0）{
$holder.show（）；
}
});
}
});

，通过指定以下内容：

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

---

之后，在旧浏览器上使用启用占位符。

是的，因为不是所有浏览器都支持HTML5，我需要一个jquery版本，它似乎可以工作，但唯一的问题是，如果页面加载时文本框中已经有值（有时会有），它还会显示holder值…@Phil-是：）这就是我写“像这样”的原因。如果文本框中已经有值，则出现问题的代码根本没有添加holder。你说得对：如果

$input.val（）.length！=0

为使此方法更灵活，为每个方法添加包装器（通过此方法）可能很有用