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

EDIT: хотя это решение работает, я бы порекомендовал вам попробовать решение 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 = '';}" />

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

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

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

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

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

просто использовать placeholder тег в вашем входе вместо value

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

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

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

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

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

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

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

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

здесь очень простой 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";
    }
}

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

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

значение важно для проверки и проверки УР PHP

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

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

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

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

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

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

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