jquery返回模糊的原始值，如果該字段留空

Question

何我能做到這一點？如果用戶將該字段留空，我想獲取原始值。

這就是我到目前爲止。 Jsfiddle Demo

這裏是我的代碼

$(document).ready(function() { 
    var field = $('input[type="text"]'); 
    field.focus(function() { //Empty the field on focus 
     var thisValue = $(this).val(); 
     $(this).attr("value", ""); 
    }); 

    field.blur(function() { //Check the field if it is left empty 
     if ($(this).val() == "") { 
      //alert('This field can not be left empty'); 
      $(this).val(thisValue); 
     } 
    }); 
});​ 

Answer 1

你基本上描述placeholder attribute，這是在所有主流瀏覽器原生支持。但是，舊版瀏覽器不支持它。爲了更廣泛的支持，您需要墊片支持此屬性。網上有很多選項可以幫你做到這一點，但如果你喜歡，你可以自己做。

基本上你想要讓自己和他人，使用標準的標記：

<input name="fname" placeholder="First Name"> 

使用jQuery你想對具有placeholder屬性的元素的focus和blur（或focusin和focusout）響應事件。如果一個元素被聚焦並且具有佔位符值，則清除該元素。如果元素模糊且爲空，則提供佔位符值。

這是一個有點冗長，但我已經添加了註釋，以幫助在以下邏輯：

// Written and tested with jQuery 1.8.1 
(function ($) { 

    // Play nice with jshint.com 
    "use strict"; 

    // Abort if browser already supports placeholder 
    if ("placeholder" in document.createElement("input")) { 
     return; 
    } 

    // Listen at the document level to work with late-arriving elements 
    $(document) 
     // Whenever blur or focus arrises from an element with a placeholder attr 
     .on("blur focus", "[placeholder]", function (event) { 
      // Determine the new value of that element 
      $(this).val(function (i, sVal) { 
       // First store a reference to it's placeholder value 
       var placeholder = $(this).attr("placeholder"), newVal = sVal; 
       // If the user is focusing, and the placehoder is already set 
       if (event.type === "focusin" && sVal === placeholder) { 
        // Empty the field 
        newVal = ""; 
       } 
       // If the user is blurring, and the value is nothing but white space 
       if (event.type === "focusout" && !sVal.replace(/\s+/g, "")) { 
        // Set the placeholder 
        newVal = placeholder; 
       } 
       // Return our new value 
       return newVal; 
      }); 
     }) 
     // Finally, when the document has loaded and is ready 
     .ready(function() { 
      // Find non-autofocus placeholder elements and blur them 
      // This triggers the above logic, which may provide default values 
      $(":input[placeholder]:not([autofocus])").blur(); 
     }); 

}(jQuery)); 

這種特殊的墊片只提供基本功能。其他人可能會擴展對使用佔位符值時更改字體顏色的支持，以及在開始鍵入之前將佔位符值保持可見（此方法僅在焦點上立即將其刪除）。

Answer 2

你應該使thisValue成爲一個全局變量。這樣它就可以到處訪問。像這樣的東西。

$(document).ready(function() { 
    var field = $('input[type="text"]'); 
    var thisValue 
    field.focus(function() {//Empty the field on focus 
     thisValue = $(this).val(); 
     $(this).attr("value",""); 
    }); 

    field.blur(function() {//Check the field if it is left empty 
     if($(this).val()=="") { 
     //alert('This field can not be left empty'); 
     $(this).val(thisValue); 
     } 
    }); 

Answer 3

這是我最近使用的是什麼：

HTML：

<input type="text" name="s" id="s" value="Search" /> 
<input type="text" name="email" id="email" value="you@domain.com" /> 
... 

的JavaScript：

// Default Input Field Text 
$(document).ready(function(){ 
    $("#s, #email, #phone, #name").live("focus", function(){ 
     if ($(this).val() == $(this).attr("rel")) $(this).val(''); 
    }).live("blur", function(){ 
     if ($(this).val() == '') $(this).val($(this).attr("rel")); 
    }).each(function(){ 
     $(this).attr("rel", $(this).val()); 
    }); 
}); 

Answer 4

下面是一個非jQuery的回答還有：

<input type="text" name="zip_code" id="zip_code_value" value="Name" onfocus="if(this.value=='Name'){this.value=''}" onblur="if(this.value==''){this.value='Name'}"> 

你可以更新你的輸入標籤，就像那樣，然後你不需要jQuery。

$(document).ready(function() { 
    var field = $('input[type="text"]'); 
    field.focus(function() { 
     var placeholder = $(this).data('placeholder'); 
     if (this.value == placeholder) 
      this.value = ""; 

    }); 

    field.blur(function() { 
     if (this.value === "") { 
      this.value = $(this).data('placeholder'); 
     } 
    }); 
});​ 

Live DEMO

關於到：

Answer 5

通過去除var

$(document).ready(function() { 
    var field = $('input[type="text"]'); 
    field.focus(function() {//Empty the field on focus 
     thisValue = $(this).val(); 
     $(this).attr("value",""); 
    }); 

    field.blur(function() {//Check the field if it is left empty 
     if($(this).val()=="") { 
     //alert('This field can not be left empty'); 
     $(this).val(thisValue); 
     } 
    }); 
}); 

http://jsfiddle.net/dbsNy/3/

Answer 6

佔位符定義在全球範圍內的：

瞭解你的DOM屬性和功能

雖然jQuery的的目標之一是抽象掉了DOM，知道 DOM屬性是非常有用的。其中最常見的做 失誤那些誰學習jQuery，而無需學習有關DOM的是 利用的jQuery真棒權力交給一個 元素的訪問屬性：

$('img').click(function() { 
    $(this).attr('src'); // Bad! 
}); 

在上面的代碼，這指的是點擊事件處理程序被觸發的元素。上面的代碼 既慢又詳細;下面的代碼功能相同 ，並且更短，更快和可讀。

的jQuery tag info