Подтвердить что ты не робот

Текст по умолчанию на входе

Как установить пустой текст по умолчанию в поле ввода и очистить его, когда элемент активен.

4b9b3361

ОТВЕТЫ

Ответ 1

В современных браузерах вы можете установить атрибут placeholder в поле, чтобы установить его текст по умолчанию.

<input type="text" placeholder="Type some text" id="myField" />

Однако в старых браузерах вы можете использовать JavaScript для захвата событий фокуса и размытия:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

Демо: http://jsbin.com/utecu

Ответ 2

Использование событий onFocus и onBlur позволяет достичь этого, I.e.:

onfocus="if(this.value=='EGTEXT')this.value=''"

и

onblur="if(this.value=='')this.value='EGTEXT'"

Полный пример выглядит следующим образом:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />

Ответ 3

Объявить стили для неактивных и активных состояний:

.active {
    color: black;
}

.inactive {
    color: #909090;
}

Добавьте Javascript для обработки изменения состояния:

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
        el.value = "";
        el.className = "active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "Default text";
            el.className = "inactive";
        }
    }
}

Добавьте поле ввода с установленным значением по умолчанию, набором классов inactive и обработчиками Javascript, указывающими на функцию toggleText() (вы можете использовать прослушиватели событий, чтобы сделать это, если хотите)

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">

Ответ 4

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

Если текст-заполнитель предназначен для подсказки о том, как заполнить вход, лучше поместить его рядом с вводом, где его можно увидеть и при заполнении ввода. Более того, использование текста-заполнителя внутри текстовых компонентов может вызвать проблемы, например. с устройствами Брайля.

Если используется текст-заполнитель, независимо от принципов удобства использования, следует убедиться, что это делается ненавязчиво, так что он работает с пользовательскими агентами без javascript или когда js отключен.

Ответ 5

Или просто

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

Это сообщение не будет удалять текст по умолчанию после удаления поля, но также позволит пользователю очистить поле и увидеть все результаты в случае автозаполнения script.

Ответ 7

То, что я сделал, помещает атрибут placeholder для современных браузеров:

<input id='search' placeholder='Search' />

Затем я сделал резерв для старых браузеров с помощью JQuery:

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

Это работает для меня.

Ответ 8

Вы можете использовать этот плагин (я соавтор)

https://github.com/tanin47/jquery.default_text

Он клонирует поле ввода и помещает его туда.

Он работает на IE, Firefox, Chrome и даже iPhone Safari, который имеет известную проблему с фокусом.

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

ИЛИ

Если вы хотите только HTML5, вы можете просто использовать атрибут "placeholder" в поле ввода