demo

Question

我想使用jquery用默认值填充字段。例如，假设我有一个电子邮件地址字段，我想在框中添加灰色斜体文本的example@email.com，并在用户点击该字段后将其删除。有没有什么好方法可以用插件或其他东西来做到这一点？如果可能的话，我真的想避免切换绝对定位的div。

Answer 1

已更新：此新版本为多个<input>元素重复使用相同的代码

试一试： http://jsfiddle.net/XTKu8/

HTML

<input id='name' class='italic' value='some name' type='text' />
<input id='email' class='italic' value='example@email.com' type='text' />

的jQuery

$('.italic').each(function() { $(this).data('defaultValue',$(this).val()); })
    .focus(function() {
        var $th = $(this);
        if($th.val() == $th.data('defaultValue'))
            $th.toggleClass('italic').val('');
    })
    .blur(function() {
        var $th = $(this);
        if($th.val() == '')
          $th.toggleClass('italic').val($th.data('defaultValue'));
    });

<强>原始

试一试： http://jsfiddle.net/ZRLK2/

HTML

<input id='email' type='text' />

的jQuery

$('#email').focus(function() {
    var $th = $(this);
    if($th.val() == 'example@email.com') {
        $th.val('')
            .css({'color':'#000','font-style':'normal'});
    }
})
    .blur(function() {
        var $th = $(this);
        if($th.val() == '') {
            $th.val('example@email.com')
            .css({'color':'#888','font-style':'italic'});
        }
    })
    .val('example@email.com')
    .css({'color':'#888','font-style':'italic'});

编辑：我忘记了斜体部分，应该使用焦点。更新。

此外，您可能希望将这些样式放在一个类中，而不是设置特定的CSS样式，并使用.addClass()和.removeClass()，或只使用.toggleClass()。

正如 karim79 所指出的，最好添加类而不是样式。你可以这样做：

.italic {
    color:#888;
    font-style:italic;
}

然后

$th.val('')
    .removeClass('italic');

$th.val('example@email.com')
    .addClass('italic');

Answer 2

demo

<input type="text" id="email" />
<input type="text" id="name" />

然后，

$(function(){
   $('#email').focus(focus).blur(blur)[0].defaultValue="example@email.com";
   $('#name').focus(focus).blur(blur)[0].defaultValue="Type name here";
})

function focus(){
   this.value = (this.value == this.defaultValue)?'':this.value;
}
function blur(){
   this.value = (this.value == '')?this.defaultValue:this.value;
}

带样式的

demo

$(function(){
    $('#email, #name').addClass('default');
    $('#email').focus(focus).blur(blur)[0].defaultValue="example@email.com";
    $('#name').focus(focus).blur(blur)[0].defaultValue="Type name here";
});

function focus(){
    if (this.value == this.defaultValue) {
        this.value = '';
        $(this).removeClass('default');
    }
}
function blur(){
    if (this.value == '') {
        this.value = this.defaultValue;
        $(this).addClass('default');
    }
}

Answer 3

<input onfocus="this.select()" type="text" value="example@email.com" />

这会在单击文本框时突出显示文本。这意味着当您在之前输入之后再次单击它时，文本将不会再次消失。

如果您确实希望每次单击时文本都消失，请使用此功能。

<input onfocus="this.value=''" type="text" value="example@email.com" />

Answer 4

你可以这样做：

$( "#emailField")
   .val( "example@email.com")
   .bind( "focus", function(){
        $(this).val("");
   })
   .bind( "onblur", function {
        $(this).val("example@email.com");
   });

Answer 5

您所描述的正是它所提供的内容：http://code.google.com/p/jquery-watermark/

 /// Adds the watermark to the text entry areas
var watermarkText = 'example@email.com ';
$(function()
{
    $('.myEmailArea').watermark(watermarkText)
});

编辑：为此示例显示一些CSS：

.watermark
{
    color: #808080 !important;
}

Answer 6

使用此CSS：

input.defaulted_input {
    color: #999999;
    font-style: italic;
}

这个Javascript：

var email_input = $("#email");
var email_value = email_input.val();
email_input.bind("focus blur", function() {
            if (this.value === email_value) {
                this.value = "";
                email_input.toggleClass("defaulted_input");
            } else if (this.value === "") {
                this.value = email_value;
                email_input.toggleClass("defaulted_input");
            }

        });

见：http://api.jquery.com/toggleClass/
见：http://jsfiddle.net/KE43P/

Answer 7

你不需要jQuery这么简单的东西，它太过分了。

<input type="text" value="initial value" onfocus="if (this.value=='initial value') this.value=''">

使用Jquery使用默认值填充字段

7 个答案:

demo

demo