插入默認值

Question

我有下面這段jQuery代碼：

$(".SearchForm input:text").each(function(){   
    /* Sets the current value as the defaultvalue attribute */ 
    if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "") 
    { 
     $(this).attr("defaultvalue", $(this).val()); 
     $(this).css("color","#9d9d9d"); 


     /* Onfocus, if default value clear the field */ 
     $(this).focus(function(){    
      if($(this).val() == $(this).attr("defaultvalue")) 
      { 
       $(this).val(""); 
       $(this).css("color","#4c4c4c"); 
      } 
     }); 

     /* Onblur, if empty, insert defaultvalue */ 
     $(this).blur(function(){ 
      alert("ud"); 

      if($(this).val() == "") 
      { 
       $(this).val($(this).attr("defaultvalue"));     
       $(this).css("color","#9d9d9d"); 
      }else 
      { 
       $(this).removeClass("ignore"); 

      } 
     }); 

    } 

}); 

我用這個代碼中插入一些默認的文本到我的一些輸入字段，當沒有其它的類型這意味着當用戶看到我的搜索表單時，默認值將被設置爲輸入字段上的一個屬性，並且這將是顯示的值。當用戶在輸入欄內單擊時，默認值將被刪除。

當用戶看到的輸入字段起初是看起來像這樣：

<input type="text" value="" defaultvalue="From" /> 

這只是正常的，但我有一個很大的挑戰。如果用戶發佈了表單，並且某個字段被輸入了某個字段，那麼如果用戶從輸入字段中刪除了文本，則無法在該字段中顯示默認值。 發生這種情況是因爲即使用戶刪除內容，文本字段的值仍包含某些內容。所以我的問題是如何在提交表單時顯示默認值，然後用戶刪除輸入的內容？

當表單提交的輸入是這樣的，並且繼續尋找下去，直到形式再次提交：

<input type="text" value="someValue" defaultvalue="From" /> 

所以我需要右後顯示在輸入字段的默認值用戶已經刪除了該字段中的內容，並從字段中刪除了該焦點。

大家都明白我的問題是什麼嗎？否則，只要問一下，我現在已經在這個問題上掙扎了很長時間了，所以任何幫助都將不勝感激。

由於提前， 金安徒生

Answer 1

您正在將defaultvalue屬性分配給您的代碼的第3-5行中的當前值。第2行的評論甚至告訴你你在做什麼。

/* Sets the current value as the defaultvalue attribute */ 
if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "") 
{ 
    $(this).attr("defaultvalue", $(this).val()); 

問題是，即使輸入的當前值是空白（「」），也要輸入此塊。發生這種情況時，您將defaultValue更新爲空白。嘗試評論這項任務，或者甚至可以擺脫最外層的if語句。我還建議使用一個類來改變你的焦點輸入字段的文本顏色。或者只是在你的CSS中使用：focus僞類。

// in your css 
.SearchForm input { color: #9d9d9d; } 
.SearchForm input.focused, 
.SearchForm input:focus { #4c4c4c; } 


$(".SearchForm input:text") 
    //.unbind('focus').unbind('blur') // uncomment if playing in the console 
    .focus(function() { 
     var $this = $(this); 
     if ($this.val() == $this.attr("defaultvalue")) 
     { 
      $this.val("") 
       //.addClass('focused'); 
     } 
    }) 
    .blur(function() { 
     var $this = $(this); 
     if ($this.val().trim() == "") 
     { 
      $this.val($this.attr("defaultvalue")); 
     } 
     //$this.removeClass('focused'); 
    }); 

注：重點不是要爲IE < 8工作，我認爲IE6也很難搞清楚什麼用超過一類事情。所以如果你想保持IE6的友好，直接在代碼中添加和刪除css顏色。

Answer 2

我覺得我做這樣的事情，你在找什麼在我們的搜索領域。這裏是顯示搜索的功能腳本，直到框中有焦點，當它失去焦點並且字段仍然爲空時，我將搜索放回到那裏。

$('#nav-search-box').addClass("idleField").focus(function() { 
$(this).removeClass("idleField").addClass("focusField"); 
if (this.value == this.defaultValue) { 
this.value = ''; 
} 
if (this.value != this.defaultValue) { 
this.select(); 
} 
}).blur(function() { 
$(this).removeClass("focusField").addClass("idleField"); 
if ($.trim(this.value) == '') { 
this.value = (this.defaultValue ? this.defaultValue : ''); 
} 
}).keypress(function(e) { 
if (e.which == 13) { 
window.location = "/search/" + $(this).val(); 
} 
}); 

如果要刪除的帖子上的字段中的文本，然後只是禁用表單提交，並添加一個按鈕單擊處理程序或類似的東西。

function disableFormPost() 
{ 
    $("#formid").submit(function() { return false }); 
}