Удалить значение по умолчанию для ввода текста при нажатии

Ответ 1

EDIT. Хотя это решение работает, я бы порекомендовал вам попробовать решение MvanGeest ниже, которое использует атрибут placeholder и javascript fallback для браузеров, которые еще не поддерживают его.

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

-

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

Вот пример:

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

Ответ 2

Для справки в будущем у меня есть, чтобы включить способ HTML5 для этого.

<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What your programming question ? be specific." />

Если у вас есть документ HTML5 и браузер, совместимый с HTML5, это будет работать. Однако многие браузеры в настоящее время не поддерживают эту, поэтому, по крайней мере, пользователи Internet Explorer не смогут увидеть ваш заполнитель. Однако см. http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ (версия archive.org) для решения. Используя это, вы будете очень современны и совместимы со стандартами, а также обеспечите функциональность для большинства пользователей.

Кроме того, предоставленная ссылка является хорошо протестированным и хорошо разработанным решением, которое должно работать из коробки.

Ответ 3

Это несколько чище, я думаю. Обратите внимание на использование свойства "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>

Ответ 4

Используя 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;
    };
}

Ответ 5

Введите следующие внутри тега просто добавьте onFocus = "value = ''", чтобы ваш окончательный код выглядел следующим образом:

<input type="email" id="Email" onFocus="value=''"> 

В этом случае используется владелец события javascript onFocus().

Ответ 6

Просто используйте тег placeholder на своем входе вместо value

Ответ 7

мы можем сделать это, не используя js следующим образом, используя атрибут "placeholder" для html5  (текст по умолчанию исчезает, когда пользователь начинает вводить, но не просто щелчком)

<input type="email" id="email" placeholder="[email protected]">

см. это: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

Ответ 8

<input name="Email" type="text" id="Email" placeholder="enter your question" />

Атрибут placeholder указывает короткий подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).

Короткий подсказка отображается в поле ввода до того, как пользователь вводит значение.

Примечание. Атрибут placeholder работает со следующими типами ввода: текстом, поиском, URL-адресом, телом, электронной почтой и паролем.

Я думаю, что это поможет.

Ответ 9

Вот очень простой javascript. Это отлично работает для меня:

function sFocus (field) {
    if(field.value == 'Enter your search') {
        field.value = '';
    }
    field.className = "darkinput";
}

function sBlur (field) {
    if (field.value == '') {
        field.value = 'Enter your search';
        field.className = "lightinput";
    }
    else {
        field.className = "darkinput";
    }
}

Ответ 10

Зачем удалять значение? его полезно, но почему бы не попробовать CSS

input[submit] {
   font-size: 0 !important;
}

Значение важно проверить и проверить ur PHP

Ответ 11

Вот решение jQuery. Я всегда возвращаю значение по умолчанию, когда пользователь очищает поле ввода.

<input name="Email" value="What your programming question ? be specific." type="text" id="Email" value="[email protected]" />

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>

Ответ 12

Я не видел таких простых ответов, как этот, поэтому, возможно, это поможет кому-то выйти.

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

Ответ 13

Вот простой способ.

#animal представляет любые кнопки из DOM.
#animal-value - это идентификатор ввода, который является целевым.

$("#animal").on('click', function(){
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
});