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: Прошу не обвинять меня в том, что я предлагаю панацею. Я такого не говорил. Доработать, добавить типы полей, проверить введенные значения и так далее — все это выходит за рамки статьи и может быть реализовано нуждающимися самостоятельно. Я показал подход к решению задачи.
