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

Question

У меня есть введенный текст:

<input name="Email" type="text" id="Email" value="email@abc.com" />

Я хочу указать значение по умолчанию, например «Какой у вас вопрос программирования? Будьте конкретны».в StackOverFlow, и когда пользователь щелкает по нему, значение по умолчанию исчезает.

Answer 1

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

<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="What's your programming question ? be specific." />

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

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

Answer 2

РЕДАКТИРОВАТЬ : Хотя это решение работает, я рекомендую вам попробовать решение MvanGeest ниже , которое использует атрибут placeholder и откат 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 = '';}" />

Answer 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>

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

Answer 5

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

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

Используется держатель события javascript onFocus ().

Answer 6

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

Answer 7

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

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

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

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

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

Answer 8

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

<input type="email" id="email" placeholder="xyz@abc.com">

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

Answer 9

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

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

Answer 10

Я не видел ни одного по-настоящему простого ответа, такого как этот, так что, возможно, это поможет кому-то.

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