这几乎可行。但是，当离开字段时出现“defaulttext”而不是原始文本值。不确定如何最有效地回显 defaultText 中的变量。
$（函数（）{ var defaultText = $(this).val(); $('input[type=text]').focus(function() { $(this).val(''); }); $('input[type=text]').blur(function() { $(this).val('defaultText'); 回声 }); });【问题讨论】：
标签： jquery
简单地写$(this).val(defaultText): 没有''否则它不会把它当作一个变量。
【讨论】：
您没有引用变量defaultText。您正在传递一个字符串，因为它包含在引号中。
$(function() {
var defaultText = $('input[type=text]').val();
$('input[type=text]').focus(function() {
$(this).val('');
});
$('input[type=text]').blur(function() {
$(this).val(defaultText); // fixed!
});
});
【讨论】：
this 关键字来访问变量defaultText 的值。如果您在理解 this 关键字方面需要帮助，这里有一个很好的资源：@987654321@
您需要删除 set 方法 (val) 中 defaultText 变量周围的“ ”标记。
尝试一些类似的东西
$(function() {
var defaultText = '';
$('input[type=text]').focus(function() {
defaultText = $(this).val();
$(this).val('');
});
$('input[type=text]').blur(function() {
$(this).val(defaultText); // NB removed the ' ' marks
//echo // What are you trying to echo?
});
});
【讨论】：
$(function() {
var input = $('input[type=text]');
input.focus(function() {
$(this).val('');
}).blur(function() {
var el = $(this);
/* use the elements title attribute to store the
default text - or the new HTML5 standard of using
the 'data-' prefix i.e.: data-default="some default" */
if(el.val() == '')
el.val(el.attr('title'));
});
});
更新
浏览器正在逐步实现placeholder 属性，它提供了向用户显示“提示”的能力。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder
【讨论】：
data-的HTML5标准
在你的萤火虫中试试这个：
$(function() { console.log($(this)) });
你会发现
var defaultText = $(this).val();
可能不是你想要的。
如果输入的初始值是默认文本，获取它是这样的：
var defaultText = $('input[type=text]').val()
请注意，只有当您的页面上只有一个输入文本时，这才能正常工作。
并且还删除引号：
$(this).val('defaultText');
【讨论】：
在每个输入标签上使用 HTML5 属性 placeholder，例如：
<input type="text" value="original text value" placeholder="default value" />
【讨论】：
此解决方案需要 jQuery！
我将这个功能封装在一个 utils 模块中，如下所示：
var utils = (function () {
var utils = {};
//some other properties...
utils.setupAutoclearInputs = function() {
$('.input-autoclear').each(function() {
$(this).data('default', $(this).val()).addClass('gray');
}).focus(function(e) {
if (!($(this).val() !== $(this).data('default'))) {
$(this).removeClass('gray').addClass('black').data('modified', true).val('');
}
}).blur(function(e) {
if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') {
$(this).removeClass('black').addClass('gray').val($(this).data('default'));
}
});
}
//some other methods...
return utils;
}());
在 HTML 中：
将：class="input-autoclear" 添加到您希望包含的每个输入。
设置默认值：<input ... value="defaultValue" ... >
为灰色和黑色文本或任何你想要的东西创建一些 css 类。
我个人使用的是.gray { ... } 和.black { ... }，但您可能想要更好的名字。
最后：
使用以下命令触发 utils 模块方法：
$(document).ready(function() {
...
utils.setupAutoclearInputs();
...
}
确保模块的代码位于 document.ready 调用之外，并且您可能希望它位于应用程序的全局范围内。
有关正确编写 javascript 模块的更多信息，请访问article。
【讨论】：
var q = $('#q');
q.focus(function() {
if ($(this).attr('data-default') == $(this).val()) {
$(this).val('');
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('data-default'));
}
});
<input type="text" name="q" id="q" data-default="Search..." value="Search..."/>
【讨论】：
这将使用 .data() 函数为您保存默认文本。所以不需要额外的标记。
$('input').focus(function() {
if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val());
if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val("");
}).blur(function(){
if ($(this).val() == "") $(this).val($(this).data("DefaultText"));
});
【讨论】：
$('.myclass').each(function() {
var default_value = this.value;
$(this).css('color', '#666'); // this could be in the style sheet instead
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
$(this).css('color', '#333');
}
});
$(this).blur(function() {
if(this.value == '') {
$(this).css('color', '#666');
this.value = default_value;
}
});
});
<input type="text" class="myclass" size="30" value="type here" />
【讨论】：
这行得通！我自己用：
/* Forminputs löschen und wiederherstellen */
jQuery(function() {
var input = jQuery('#userForm input[type=text], #userForm textarea');
input.focus(function() {
jQuery(this).attr('data-default', jQuery(this).val());
jQuery(this).val('');
}).blur(function() {
var el = jQuery(this);
if (el.val() == '')
el.val(el.attr('data-default'));
});
});
【讨论】：
我稍微调整了这段代码。
$(document).ready(function () {
var defaultText = '';
$('.input-focus-clear').focus(function () {
defaultText = $(this).val();
$(this).val('');
});
$('.input-focus-clear').blur(function () {
var newText = $(this).val();
if (newText.length < 1) {
$(this).val(defaultText);
}
});
});
【讨论】：
$("input[type=text]").focus(function () {
$(this).attr("data-old-input", $(this).val());
$(this).val("");
});
$("input[type=text]").blur(function () {
$(this).val($(this).attr("data-old-input"));
$(this).attr("data-old-input", "");
});
【讨论】：