Javascript 空文本框上的 JQuery 默认文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4770585/
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
JQuery Default text on empty text box
提问by CongdonJL
I have a email form text box that while it is empty I would like it to have the value "E-Mail" And when you click on it the text goes away. If someone clicks on it and doesn't enter text. on Blur I would like for it to return to having the default text.
我有一个电子邮件表单文本框，虽然它是空的，但我希望它具有值“电子邮件”，当您单击它时，文本就会消失。如果有人点击它并且没有输入文本。在 Blur 上，我希望它恢复默认文本。
I have been trying a few things but nothing is working. Could someone please point me in the right direction?
我一直在尝试一些东西，但没有任何效果。有人可以指出我正确的方向吗？
回答by webtweakers
Or you could just use the placeholder html5 attribute:
或者你可以只使用占位符 html5 属性：
<input type="text" id="keyword" name="keyword" placeholder="Type keyword here" />
回答by Jacob Lowe
it goes something like this
它是这样的
$('#yourElement').focus(function(){
//Check val for email
if($(this).val() == 'E-Mail'){
$(this).val('');
}
}).blur(function(){
//check for empty input
if($(this).val() == ''){
$(this).val('E-Mail');
}
});
回答by vts
you can use the placeholder attribute and then us this jquery as backup for IE
您可以使用占位符属性，然后使用此 jquery 作为 IE 的备份
<input type="text" id="keyword" name="keyword" placeholder="The watermark" value='The watermark' class="watermark"/>
$(document).ready(function () {
$('.watermark').focus(function () {
if ($(this).val() == $(this).attr('placeholder')) {
$(this).val('');
}
}).blur(function () {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
}
});
});
回答by sdleihssirhc
It's pretty straightforward.Just erase the value onfocus, and then (if the value is still empty) refill it onblur.
这很简单。只需擦除该值onfocus，然后（如果该值仍为空）重新填充它onblur。
回答by doc_id
Call the below function and pass it two args: slightLabel(jQuery('#email_field'), 'email');
调用下面的函数并传递两个参数： slimLabel(jQuery('#email_field'), 'email');
function slightLabel(input, text) {
jQuery(input).val(text);
jQuery(input).data('defaultText', text);
jQuery(input).focus(function(){
if(!jQuery(this).data('touched'))
{
jQuery(this).data('touched', true);
jQuery(input).val('');
}
});
// the part to restore the original text in
jQuery(input).blur(function(){
if(jQuery(this).val() == '')
{
jQuery(this).val(jQuery(this).data('defaultText'));
}
});
}
回答by Cyril Gupta
You could use one of the watermark plugins of jquery that do just that. I use a watermark plugin that has the following code
您可以使用 jquery 的水印插件之一来做到这一点。我使用具有以下代码的水印插件
$.fn.watermark = function (c, t) {
var e = function (e) {
var i = $(this);
if (!i.val()) {
var w = t || i.attr('title'), $c = $($("<div />").append(i.clone()).html().replace(/type=\"?password\"?/, 'type="text"')).val(w).addClass(c);
i.replaceWith($c);
$c.focus(function () {
$c.replaceWith(i); setTimeout(function () { i.focus(); }, 1);
})
.change(function (e) {
i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i);
})
.closest('form').submit(function () {
$c.replaceWith(i);
});
}
};
return $(this).live('blur change', e).change();
};
};
Callable in jquery by setting the class of the input textbox to watermark like this
通过将输入文本框的类设置为这样的水印，可以在 jquery 中调用
<input type="text" id="keyword" name="keyword" class="watermark" style="width: 250px"
title="Type keyword here" />
The title is what will be displayed in the watermark.
标题是将显示在水印中的内容。
回答by Khabba
Use this Jquery-placeholderplugin
使用这个Jquery-placeholder插件
Using this plugin makes it possible to also use the placeholder attribute in non HTML5 capable browsers.
使用此插件还可以在不支持 HTML5 的浏览器中使用占位符属性。
