Допустим была поставлена задача – сделать, чтоб при клике по полю ввода стандартный текст внутри пропадал. То есть всем известно, что у полей формы есть параметр value, который задает, что будет выведено в поле. Но когда нужно что-то ввести в это поле, то нужно предварительно удалить текст, который задан через этот параметр. В этой заметке описан легкий способ, как сделать, чтоб текст, который в поле, пропадал сразу по клику по полю, чтоб не было необходимости удалять ручками текст заданный параметром value.
Все это реализируется таким простым образом:
Code
<input type="text" id="email" name="email" value="Ваш текст"
onfocus="if (this.value=='Ваш текст') this.value='';"
onblur="if (this.value==''){this.value='Ваш текст'}" />
Тоесть в поле инпута нужно просто добавить всесто атрибута value
Code
value="Ваш текст"
onfocus="if (this.value=='Ваш текст') this.value='';"
onblur="if (this.value==''){this.value='Ваш текст'}"
Трюк основан на использовании двух событий onfocus и onblur. onfocus выполняется, когда поле становится активным. onblur выполняется, когда поле теряет фокус. Далее следует проверка if (this.value=='Ваш текст') this.value=' '; которая проверяет если в поле стоит дефолтный текст, то при фокусе он убирается, позволяя пользователю ввести свои данные. Проверка в событии onblur возвращает дефолтный текст, если пользователь ничего не ввел в поле.
Нюанс состоит в том, что событие onblur и прочие должны писаться полностью с маленькой буквы, ибо написания вида onBlur, onFocus не проходят валидацию. Еще одним недостатком является то, что при отключении JavaScripтов пользователю придется ручками удалять текст из полей так, как события не будут работать.
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 22:30
