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