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。

Answer 2

它应该是这样的：

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

表单预填充jquery（使其可扩展）

2 个答案: