Удалите значение по умолчанию входного текста по щелчку

Думаю, это немного чище. Обратите внимание на использование свойства "defaultValue" ввода:

<script>
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

РЕДАКТИРОВАТЬ : Хотя это решение работает, я бы порекомендовал вам попробовать решение MvanGeest ниже , которое использует атрибут-заполнитель -атрибут и резервный javascript для браузеров, которые не поддерживаю это пока.

Если вы ищете Mootools, эквивалентный резервному варианту JQuery в ответе MvanGeest, вот один .

-

Вам, вероятно, следует использовать события onfocus и onblur , чтобы поддерживать пользователей клавиатуры, которые переходят через формы с помощью табуляции.

Вот пример:

<input type="text" value="email@abc.com" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = 'email@abc.com';}"
 onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />

Используя jQuery, вы можете сделать:

$("input:text").each(function ()
{
    // store default value
    var v = this.value;

    $(this).blur(function ()
    {
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    }).focus(function ()
    {
        // when input is focused, clear its contents
        this.value = "";
    }); 
});

И вы можете запихнуть все это в пользовательский плагин, например, так:

jQuery.fn.hideObtrusiveText = function ()
{
    return this.each(function ()
    {
        var v = this.value;

        $(this).blur(function ()
        {
            if (this.value.length == 0) this.value = v;
        }).focus(function ()
        {
            this.value = "";
        }); 
    });
};

Вот как вы будете использовать плагин:

$("input:text").hideObtrusiveText();

Преимущества использования этого кода:

• Он ненавязчив и не загрязняет DOM
• Повторное использование кода: он работает с несколькими полями
• Он сам определяет значение по умолчанию для вводимых данных

Подход без использования jQuery:

function hideObtrusiveText(id)
{
    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    {
        e.value = "";
    };

    e.onblur = function ()
    {
        if (e.value.length == 0) e.value = v;
    };
}