空文本框上的JQuery默认文本

我有一个电子邮件表单文本框，虽然它是空的我希望它有值“电子邮件”当你点击它时文本消失。 如果有人点击它并且没有输入文本。 在模糊我希望它返回到默认文本。

我一直在尝试一些事情，但没有任何工作。 有人可以指出我正确的方向吗？

Answer 1

或者您可以使用占位符html5属性：

Answer 2

它就是这样的

 $('#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'); } }); 

Answer 3

您可以使用占位符属性，然后使用此jquery作为IE的备份

  $(document).ready(function () { $('.watermark').focus(function () { if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); } }).blur(function () { if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); } }); }); 

Answer 4

这很简单。 只需擦除onfocus的值，然后（如果值仍然为空）将其重新填充onblur 。

Answer 5

调用下面的函数并传递两个args：slightLabel（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')); } }); } 

Answer 6

你可以使用jquery的一个水印插件来做到这一点。 我使用具有以下代码的水印插件

 $.fn.watermark = function (c, t) { var e = function (e) { var i = $(this); if (!i.val()) { var w = t || i.attr('title'), $c = $($("
").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(); 

};

通过将输入文本框的类设置为这样的水印，可以在jquery中调用

标题是将在水印中显示的内容。

Answer 7

使用此Jquery-placeholder插件

使用此插件可以在非HTML5浏览器中使用占位符属性。