空文本框上的JQuery默认文本

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.

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

I have been trying a few things but nothing is working. Could someone please point me in the right direction?

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

7 个解决方案

#1

Or you could just use the placeholder html5 attribute:

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

<input type="text" id="keyword" name="keyword" placeholder="Type keyword here" />

#2

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

#3

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

#4

It's pretty straightforward. Just erase the value onfocus, and then (if the value is still empty) refill it onblur.

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

#5

Call the below function and pass it two args: slightLabel(jQuery('#email_field'), 'email');

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

    }

#6

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.

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

#7

Use this Jquery-placeholder plugin

使用此Jquery-placeholder插件

Using this plugin makes it possible to also use the placeholder attribute in non HTML5 capable browsers.

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

#1