X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> jQuery - умный input[text]
Zippovich
Zippovich
Topic Starter сообщение 31.3.2010, 17:45; Ответить: Zippovich
Сообщение #1


Многие наверное видели такой эффект:
до фокуса на поле ввода:
[attachment=36388:before-focus.jpg]
после получения фокуса полем для ввода:
[attachment=36389:focus.jpg]
ну и если ничего не изменять и фокус поле для ввода потеряет, то будет опять так:
[attachment=36388:before-focus.jpg]

Я покажу очень простую реализацию данного поведения:
в HTML, например у нас есть неограниченное кол-во таких input:
...
<input type="text" id="email" name="email" value="Email address..." title="Email address..." />
<input type="text" id="email2" name="email2" value="Other email address..." title="Other email address..." />
...
Тут стоит сказать, что для таких полей value должен быть равен title. Зачем? Сейчас покажу.

Вот сам скрипт:

[php]$(function() {
$('input[title]').bind({
focus: function() {
if ($(this).attr('title') == $(this).attr('value')) {
$(this).attr('value', '');
}
},
blur: function() {
if ($(this).attr('value') == '') {
$(this).attr('value', $(this).attr('title'));
}
}
});
});[/php]Что делает скрипт, он берет все поля input, у которых есть аттрибут title и навешивает на них события, при получении фокуса и потере фокуса.

Если есть замечания, прошу высказываться.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 31.3.2010, 18:11; Ответить: Letmetouchyou
Сообщение #2


без jquery уже не модно?)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
Topic Starter сообщение 31.3.2010, 18:23; Ответить: Zippovich
Сообщение #3


(Letmetouchyou @ 31.3.2010, 21:11) *
без jquery уже не модно?)


неа...
подключил и забыл что такое кроссброузерный javascript, о листингах js, для реализации простой идеи )
да и кода меньше будет, если активно используется js на сайте, если нужно на чистом js могу написать для примера, но реализация jQuery.ready на чистом js довольно сложна.
Не говоря уже о скорости разработки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 1.4.2010, 1:13; Ответить: ZhukV
Сообщение #4


Да, для первоклашек однако. Но все же полезно.
Предложение:
Поправь. Можна не только одинаково указывать title и value, можна в проверке сразу прописать, но тогда будет фиксировано, и если имеется много форм, особенно с этими полями, то будет лажа.
Тем более, таким способом можна проверять валидность введенных даных, и если нет, выводить текст при потере фокуса красным цветом, если уж да, то каким-то другим :)

А вообще то прикольно, молодца.
Можна даже вынести на портотип jQuery и спокойно пользоватся.

подключил и забыл что такое кроссброузерный javascript

ВПОЛНЕ СОГЛАСЕН!!! Я даже уже забыл, как ява глюкает на ИЕ.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Albert_hb
Albert_hb
сообщение 1.4.2010, 2:34; Ответить: Albert_hb
Сообщение #5


я может эффект не совсем понимаю :wacko:
но я обычно тупо пишу:
<input class="search" type="text" value="поиск" onclick="if (this.value == 'поиск') { this.value='' } ;" onblur="if (this.value=='') { this.value='поиск'; }" />
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
Topic Starter сообщение 1.4.2010, 4:10; Ответить: Zippovich
Сообщение #6


(Albert_hb @ 1.4.2010, 05:34) *
я может эффект не совсем понимаю :wacko:
но я обычно тупо пишу:
<input class="search" type="text" value="поиск" onclick="if (this.value == 'поиск') { this.value='' } ;" onblur="if (this.value=='') { this.value='поиск'; }" />


Это все для того, что бы не писать на каждом инпуте вот такое:
onclick="if (this.value == 'поиск') { this.value='' } ;" onblur="if (this.value=='') { this.value='поиск'; }"

скрипт сам найдет все необходимые инпуты и расставит события. Так же JavaScript должен быть фоновым. Всякие onclick, onfocus, onblur засоряют html-код.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
Topic Starter сообщение 1.4.2010, 4:14; Ответить: Zippovich
Сообщение #7


(ZhukV @ 1.4.2010, 04:13) *
... и если имеется много форм, особенно с этими полями, то будет лажа.
Тем более, таким способом можна проверять валидность введенных даных, и если нет, выводить текст при потере фокуса красным цветом, если уж да, то каким-то другим :)

лажи не будет, хоть мильен инпутов с одинаковым title и value пользовать, события навешиваются отдельно на каждый инпут и значения сверяются только со значением нужного инпута.
Про валидацию на стороне клиента отдельный разговор, я напишу чуть позже как ее красиво и правильно делать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 1.4.2010, 8:42; Ответить: Alcorn
Сообщение #8


(Letmetouchyou @ 31.3.2010, 21:11) *
без jquery уже не модно?)

Если jquery подключен, то терять уже нечего :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 1.4.2010, 10:12; Ответить: Letmetouchyou
Сообщение #9


Alcorn, быстройдействие терять)
на слабых машинах, на недорогих нетбуках ето будет оч заметно)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 1.4.2010, 10:32; Ответить: Alcorn
Сообщение #10


Я к тому, что если jquery уже подключен к сайту, то только на нём и нужно делать всё остальное.
А если не подключен, то есть выбор.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1243 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44929 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1471 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
2 vlads 3820 25.12.2017, 21:18
автор: xetedata
Открытая тема (нет новых ответов) Frontend услуги (верстка, подключение jquery плагинов, кастомизация, написание скриптов)
услуги по frontend-разработке
15 FrontMaster 10054 25.11.2017, 13:46
автор: Stom


 



RSS Текстовая версия Сейчас: 24.4.2024, 8:43
Дизайн