1

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

仅适用于 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();
        }

    });
}
4

2 回答 2

2

HTML5 允许您通过指定以下内容为输入字段设置占位符文本：

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

之后，使用jQuery 插件placeholder在旧浏览器上启用s。

于 2011-02-16T15:49:02.760 回答
0

它应该如下所示：

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();
      }
    });
  }
});
于 2011-02-16T15:34:56.993 回答