jQuery дает практически безграничные возможности по обогащению пользовательского интерфейса, а самое интересное зачастую связано с элементами управления на страницах, в частности с формами.
Современные интерфейсы часто стремятся к минимализму. При изяществе дизайна, вэб-технологи стремятся к изяществу решений, принимаемых в процессе реализации. Я часто занимаюсь разработкой интерфейсов, версткой и клиентским программированием — и постоянно ищу новые решения для старых задач.
В статье речь пойдет о значениях в полях формы по умолчанию, когда название поля является его изначальным содержимым. А также об изящном решении этой задачи на практике.
В последнее время я все чаще и чаще встречаю похожие на эту вэб формы:
Это хорошее визуальное решение, правда с очевидными и не очевидными особенностями.
Во-первых, часто встречается явно вписанный (сгенерированный?) в html-разметку яваскрипт-код, который занимается обработкой событий onfocus/onblur, а иногда в внешнем яваскрипт-файле прописаны события на каждый элемент индивидуально, где также указаны их значения по умолчанию. Например при потере фокуса:
Во-вторых, после начала ввода в такое поле — уже никак не посмотреть, что это в конце концов за поле (конечно, редко большие формы или анкеты оформлены именно таким образом, но все равно это недостаток). Остается стереть значение, чтобы сработал яваскрипт-обработчик, и вернулось значение по умолчанию.
В-третьих, популярная ныне семантичность, удобство, разделение представления и кода — все это привело к тому, что многие изученные способы просто отметались. Зачем писать код полей по умолчанию в javascript?
В сети люди изобретали разные велосипеды, в разной степени варьировавшиеся от обсужденных выше вариантов. Что ж, подумал я, пожалуй одним велосипедом будет больше.
Все оказалось очень просто. Ведь есть очень удобный атрибут title, который поможет узнать пользователю о том, в каком поле он находится при наведении на него мышкой:
«Так, стоп! Это же и есть хранилище для значения по умолчанию!», — так примерно и была решена задача. Всего несколько строк кода:
Всего несколько строк кода решают эту задачу наилучшим способом, который я могу себе представить. Ничего лишнего, никакого дублирования, просто, вкусно, семантично. Могу сразу сказать, что сохранение значения value по умолчанию — плохой вариант. Обновление страницы не всегда влечет за собой обновление формы — особенность многих браузеров, заботящихся о сохранности данных пользователя.
Надеюсь, что метод пригодится таким же ищущим, каким был я некоторое время назад.
UPD: Прошу не обвинять меня в том, что я предлагаю панацею. Я такого не говорил. Доработать, добавить типы полей, проверить введенные значения и так далее — все это выходит за рамки статьи и может быть реализовано нуждающимися самостоятельно. Я показал подход к решению задачи.
Современные интерфейсы часто стремятся к минимализму. При изяществе дизайна, вэб-технологи стремятся к изяществу решений, принимаемых в процессе реализации. Я часто занимаюсь разработкой интерфейсов, версткой и клиентским программированием — и постоянно ищу новые решения для старых задач.
В статье речь пойдет о значениях в полях формы по умолчанию, когда название поля является его изначальным содержимым. А также об изящном решении этой задачи на практике.
В последнее время я все чаще и чаще встречаю похожие на эту вэб формы:
Это хорошее визуальное решение, правда с очевидными и не очевидными особенностями.
Про поиски
Во-первых, часто встречается явно вписанный (сгенерированный?) в html-разметку яваскрипт-код, который занимается обработкой событий onfocus/onblur, а иногда в внешнем яваскрипт-файле прописаны события на каждый элемент индивидуально, где также указаны их значения по умолчанию. Например при потере фокуса:
$("input#name").blur(function(){ $(this).attr("value", "Ваше имя")})
* This source code was highlighted with Source Code Highlighter.Во-вторых, после начала ввода в такое поле — уже никак не посмотреть, что это в конце концов за поле (конечно, редко большие формы или анкеты оформлены именно таким образом, но все равно это недостаток). Остается стереть значение, чтобы сработал яваскрипт-обработчик, и вернулось значение по умолчанию.
В-третьих, популярная ныне семантичность, удобство, разделение представления и кода — все это привело к тому, что многие изученные способы просто отметались. Зачем писать код полей по умолчанию в javascript?
В сети люди изобретали разные велосипеды, в разной степени варьировавшиеся от обсужденных выше вариантов. Что ж, подумал я, пожалуй одним велосипедом будет больше.
Про решение
Все оказалось очень просто. Ведь есть очень удобный атрибут title, который поможет узнать пользователю о том, в каком поле он находится при наведении на него мышкой:
«Так, стоп! Это же и есть хранилище для значения по умолчанию!», — так примерно и была решена задача. Всего несколько строк кода:
jQuery(document).ready(function(){
$("input, textarea").focus(function(){
if ($(this).attr("value") == $(this).attr("title"))
$(this).attr("value", "")
});
$("input, textarea").blur(function(){
if ($(this).attr("value") == "")
$(this).attr("value", $(this).attr("title"))
});
});
* This source code was highlighted with Source Code Highlighter.Всего несколько строк кода решают эту задачу наилучшим способом, который я могу себе представить. Ничего лишнего, никакого дублирования, просто, вкусно, семантично. Могу сразу сказать, что сохранение значения value по умолчанию — плохой вариант. Обновление страницы не всегда влечет за собой обновление формы — особенность многих браузеров, заботящихся о сохранности данных пользователя.
Надеюсь, что метод пригодится таким же ищущим, каким был я некоторое время назад.
UPD: Прошу не обвинять меня в том, что я предлагаю панацею. Я такого не говорил. Доработать, добавить типы полей, проверить введенные значения и так далее — все это выходит за рамки статьи и может быть реализовано нуждающимися самостоятельно. Я показал подход к решению задачи.
