我能做到这一点吗？如果用户将该字段留空，我想获得原始值。
这是我到目前为止得到的。Jsfiddle 演示
这是我的代码
$(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);
}
});
});
您本质上是在描述所有主要浏览器都原生支持的placeholder属性。但是，旧浏览器不支持它。要获得更广泛的支持，您需要对此属性进行填充支持。网上有很多选项可以为您执行此操作，但如果您愿意，您可以自己执行。
本质上，您希望允许自己和他人使用标准标记：
<input name="fname" placeholder="First Name">
使用 jQuery，您将响应具有该属性的任何元素的focusand blur(or focusinand focusout) 事件。placeholder如果一个元素获得焦点，并且具有占位符值，则清除该元素。如果元素模糊且为空，则提供占位符值。
这有点冗长，但我添加了注释以帮助遵循逻辑：
// 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));
这个特殊的垫片只提供基本功能。其他人可能会扩展支持以在使用占位符值时更改字体颜色，以及在您开始键入之前保持占位符值可见（这种方法只是在焦点上立即将其删除）。
这也是一个非 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');
}
});
});
关于$(this).val()：
了解你的 DOM 属性和函数
虽然 jQuery 的目标之一是抽象出 DOM，但了解 DOM 属性可能非常有用。那些在不了解 DOM 的情况下学习 jQuery 的人最常犯的错误之一是利用 jQuery 的强大功能来访问元素的属性：
$('img').click(function() {
$(this).attr('src'); // Bad!
});
在上面的代码中， this 指的是触发 click 事件处理程序的元素。上面的代码既慢又冗长；下面的代码功能相同，而且更短、更快、更易读。
jQuery标签信息
您应该使 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);
}
});
这是我最近一直在使用的：
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() );
});
});
thisValue通过删除在全局范围内定义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);
}
});
});