问题
Ho can I achieve this? I want to get the original value if the user left the field blank.
This is what I got so far. Jsfiddle Demo
Here is my code
$(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);
}
});
});
回答1:
You're essentially describing the placeholder attribute, which is supported natively in all major browsers. It is not, however, supported in older browsers. For broader support you will need to shim support for this attribute. Many options exists online that do this for you, but you could do it yourself if you like.
Essentially you want to allow yourself, and others, to use standard markup:
<input name="fname" placeholder="First Name">
Using jQuery you would respond to the focus and blur (or focusin and focusout) events of any element having the placeholder attribute. If an element is focused, and has the placeholder value, you clear the element. If the element is blurred, and empty, you provide the placeholder value.
This is a bit verbose, but I've added comments to assist in following the logic:
// 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));
This particular shim only provides basic functionality. Others may extend support to changing the font color when the placeholder value is used, as well as leaving the placeholder value visible until you begin typing (this approach simply removes it immediately on focus).
回答2:
Here is a non jQuery answer as well:
<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'}">
You can just update your input tags to be like that and then you don't need jQuery.
回答3:
Placeholder:
$(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
Regarding to $(this).val():
Know Your DOM Properties and Functions
While one of the goals of jQuery is to abstract away the DOM, knowing DOM properties can be extremely useful. One of the most commonly made mistakes by those who learn jQuery without learning about the DOM is to Utilize the awesome power of jQuery to access properties of an element:
$('img').click(function() {
$(this).attr('src'); // Bad!
});
In the above code, this refers to the element from which the click event handler was fired. The code above is both slow and verbose; the code below functions identically and is much shorter, faster and readable.
The jQuery tag info
回答4:
you should make thisValue a global variable. this way it would be accessible everywhere. something like this.
$(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);
}
});
回答5:
Here's what I've been using recently:
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() );
});
});
回答6:
define the thisValue in the global scope by removing the 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/
来源：https://stackoverflow.com/questions/10393934/jquery-return-original-value-on-blur-if-the-field-left-empty