使用 jQuery 清除焦点输入并返回模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9012644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear input on focus with jQuery and return on blur
提问by cchiera
This almost works. However, when leaving the field "defaulttext" appears rather than the original text value. Not sure how to most efficiently echo the variable inside defaultText.
这几乎有效。但是，当离开该字段时，会出现“defaulttext”而不是原始文本值。不确定如何最有效地回显 defaultText 中的变量。
$(function() {
var defaultText = $(this).val();
$('input[type=text]').focus(function() {
$(this).val('');
});
$('input[type=text]').blur(function() {
$(this).val('defaultText');
echo
});
});
回答by xandercoded
$(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'));
});
});
Update
更新
Browsers are progressively implementing the placeholderattribute, which provides the ability to display a "hint" to the user.
浏览器正在逐步实现该placeholder属性，它提供了向用户显示“提示”的能力。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder
回答by Dave Walker
You need to remove the ' ' marks around the defaultText variable in your set method (val).
您需要删除 set 方法 (val) 中 defaultText 变量周围的“ ”标记。
Try something along hte lines of
尝试一些东西
$(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?
});
});
回答by mattdlockyer
This solution requires jQuery!
这个解决方案需要jQuery！
I wrapped this functionality up in a utils module like so:
我将此功能封装在一个 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;
}());
In the HTML:
在 HTML 中：
Add: class="input-autoclear"to each input you wish to be included.
添加：class="input-autoclear"到您希望包含的每个输入。
Set the default value: <input ... value="defaultValue" ... >
设置默认值： <input ... value="defaultValue" ... >
Create some css classes for gray and black text or whatever you want.
为灰色和黑色文本或您想要的任何内容创建一些 css 类。
Personally I'm using .gray { ... }and .black { ... }but you might want better names.
我个人正在使用.gray { ... }，.black { ... }但你可能想要更好的名字。
Finally:
最后：
Fire the utils modules method using:
使用以下命令启动 utils 模块方法：
$(document).ready(function() {
...
utils.setupAutoclearInputs();
...
}
Make sure the code for the module lives outside the document.ready call and you will probably want it in the global scope of your application.
确保模块的代码位于 document.ready 调用之外，并且您可能希望它位于应用程序的全局范围内。
For more on proper javascript module writing, visit this article.
有关正确编写 javascript 模块的更多信息，请访问这篇文章。
回答by Djesse
This one will save the default text for you using the .data() function. So no need for extra markup.
这将使用 .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"));
});
回答by Tarmo
I funetuned this code little bit.
我稍微调整了这段代码。
$(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);
}
});
});
回答by Tici
Use HTML5 attribute placeholderon each input tag, eg:
在每个输入标签上使用 HTML5 属性占位符，例如：
<input type="text" value="original text value" placeholder="default value" />
回答by Jonas m
Simpl write $(this).val(defaultText):without the ''s else it wont treat it as a variable.
$(this).val(defaultText):不带 ' 的简单写入，否则不会将其视为变量。
回答by shaunsantacruz
You're not referencing the variable defaultText. You're passing a string since it's wrapped in quotes.
你没有引用变量defaultText。您正在传递一个字符串，因为它用引号括起来。
$(function() {
var defaultText = $('input[type=text]').val();
$('input[type=text]').focus(function() {
$(this).val('');
});
$('input[type=text]').blur(function() {
$(this).val(defaultText); // fixed!
});
});
回答by clime
Try this in your firebug:
在你的萤火虫中试试这个：
$(function() { console.log($(this)) });
You will find out that
你会发现
var defaultText = $(this).val();
is probably not what you want.
可能不是你想要的。
If initial value for the input is the default text, obtain it like this:
如果输入的初始值是默认文本，请按如下方式获取：
var defaultText = $('input[type=text]').val()
Be aware, that this will work correctly only if there is just one input text on your page.
请注意，只有当您的页面上只有一个输入文本时，这才能正常工作。
And also remove quotes in:
并删除引号：
$(this).val('defaultText');
回答by lokers
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..."/>
