形式預填充與jQuery（使其可擴展）

Question

我有jquery下面基本預填充文本框。 （它實際上是在文本框的上方放置一個跨度，然後將文本框放置在文本框上，然後當單擊跨度時，它會隱藏它並將焦點放在文本框上。）這樣，我不必添加預填充值添加到表單字段中，所以如果用戶提交它將不會提交填充值。現在，這似乎工作，但問題是我有關於文本框，我想要有不同的預填充值的所有功能。我試圖找出一種方法來實現這個規模，所以我只需要一個函數，並且根據文本框的ID，它會將不同的數據填充到上面的範圍中。任何幫助將是偉大的！

工作jQuery代碼只有1文本框：（我真的不想一遍又一遍寫這個功能對於每個文本框

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