Заполните поля значениями по умолчанию, используя Jquery

Question

Я хотел бы использовать jquery для заполнения полей значениями по умолчанию. Например, скажем, у меня есть поле для адреса электронной почты, и я хочу добавить example@email.com серым курсивом в поле и удалить его, как только пользователь нажмет на поле. Есть ли хороший способ сделать это с помощью плагина или что-то? Я действительно хотел бы избежать переключения абсолютно позиционированного div, если это возможно.

Answer 1

демо

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

---

демо со стилями

$(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 2

Обновлено: Эта новая версия позволяет повторно использовать один и тот же код для нескольких <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().

• http://api.jquery.com/addClass/
• http://api.jquery.com/removeClass/
• http://api.jquery.com/toggleClass/

Как отмечалось karim79 , лучше добавлять классы вместостили.Вы можете сделать это вместо этого:

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

Тогда

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

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

Answer 3

Что вы описываете, это именно то, что предлагает: 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 4

Вы можете сделать:

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

Answer 5

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

Подсвечивает текст после нажатия в текстовом поле. Это означает, что при повторном щелчке по нему после ввода текста текст снова не исчезнет.

Если вы действительно хотите, чтобы текст каждый раз при клике исчезал, используйте это.

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

Answer 6

Вам не нужен jQuery для чего-то такого тривиального, чрезмерного.

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

Answer 7

Используйте этот 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");
            }

        });​

SEE: http://api.jquery.com/toggleClass/
SEE: http://jsfiddle.net/KE43P/