Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Подсказки для полей input и textarea

January 25th, 2008 | Category: Javascript, Prototype, Tutorial | Автор: Александр

Работа с html формами это одно из самых интересных занятий. Чего только не сделаешь, и автокомплит и валидация форм и отправка данных аяксом. Недавно меня заинтересовала проблема показа подсказок для пользователей. Например если это поле поиска, то можно показывать некоторые примеры. Например список распространённым запросов. При нажатии на поле, эти подсказки надо спрятать и если юзер ничего не ввёл - то снова их показывать.

В интернете есть куча примеров как это сделать, но я решил написать своё. Вот идея реализации. Для подсказок будем использовать аттрибут "title" и "value". Также элементам с такой функциональностью дадим класс "ClearOnClick". Тоесть элемент формы будет выглядеть примерно так:

PLAIN TEXT
HTML:
  1. <input type="text" title="Example: ajaxrussia, google, yahoo" value="Example: ajaxrussia, google, yahoo" name="query" class="ClearOnClick" />

После этого осталось только написать джаваскрипт код. Код будет работать на основе Prototype. Без него не запашет. Сделаю джаваскрипт класс ClearOnClick, который будет жить в namespace AjaxRussia. (Тут я писал про Javascript Namespaces).

PLAIN TEXT
JavaScript:
  1. var AjaxRussia = function() {
  2.   return {
  3.     ClearOnClick: Class.create({
  4.       initialize: function(class_name) {
  5.         document.observe('dom:loaded', function() {
  6.  
  7.           $$('input.'+class_name+', textarea.'+class_name).each(function(field){
  8.  
  9.             // Ждём фокуса на это поле
  10.             field.observe('focus', function(){
  11.               if(field.title && field.title.length> 0) {
  12.                 if(field.value == field.title) {
  13.                   field.value = "";
  14.                 }
  15.               }
  16.             });
  17.  
  18.             // А тут ждём когда с поля фокус пропадёт
  19.             field.observe('blur', function(){
  20.               if(field.title && field.title.length> 0) {
  21.                 if(field.value == "") {
  22.                   field.value = field.title;
  23.                 }
  24.               }
  25.             });
  26.  
  27.           });
  28.         });
  29.       }
  30.     })
  31.   };
  32. }();

Код сохраним в отдельный файл - clearonclick.js. И всё. Теперь создаём инстанцию класса, как параметр передаём нужный нам CSS класс, и наши поля становятся волшебными :)

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="http://www.ajaxrussia.com/wp-content/uploads/2008/01/prototype.js"></script>
  2. <script type="text/javascript" src="http://www.ajaxrussia.com/wp-content/uploads/2008/01/clearonclick.js"></script>
  3. <script type="text/javascript">
  4.   var magicFields = new AjaxRussia.ClearOnClick('ClearOnClick');
  5. </script>

Тестируем тут:



del.icio.us Забобрить!

13 Comments so far

  1. Думаю January 25th, 2008 08:36

    Приветик, при всем уважении:
    Пиши почаще, я понимаю, работа и так далее, но уж очень редко, и что то ты под конец начал все больше про рельсы писать и так далее :)

    Что то нет ни одного отличного и часто обновляемого блога по разным библиотекам и так далее :( Ты был последней надеждой :(

  2. DeadLy January 25th, 2008 08:48

    Не совсем понимаю зачем сюда AJAX прикручивать, или может я не внимательно статью прочитал )))

  3. Aleksandr January 25th, 2008 09:56

    @Думаю: На работе сейчас все заняты новым дизайном сайта, поэтому мало времени :(

    @DeadLy: Где ты аякс увидел?

  4. DeadLy January 25th, 2008 10:07

    Aleksandr, сорри, не аякс, а библиотеку prototype.

    не проще ли.

  5. DeadLy January 25th, 2008 10:08

    onFocus=”this.value = ”;” onBlur=”this.value = (this.value == ”) ? ‘Поиск’ : this.value;”

  6. Денис Радченко January 25th, 2008 10:13

    Подскажите, как это еще и для input[type=password] сделать ?

  7. Steward January 25th, 2008 10:46

    2 Денис Радченко
    да легко :)
    &ltinput type=”text” value=”Пароль:” onFocus=”this.value = ”; this.type = ‘password’;” onBlur=”this.type = (this.value ==” ) ? ‘text’:'password’ ; this.value = (this.value ==” ) ? ‘Пароль:’ : this.value; “&gt

    но для пароля мне кажется это изврат :)

  8. Сергей Митрошин January 25th, 2008 10:50

    >Подскажите, как это еще и для input[type=password] сделать ?
    Придётся сохранить нужный текст изображением и оперировать уже им как background’ом при помощи JavaScript+CSS.

  9. Steward January 25th, 2008 11:20

    2 Сергей Митрошин - чего-чего? :))) - я ж написал рабочий пример :)))

  10. NoNseNs January 25th, 2008 18:28

    Steward, +1
    это все делается одной строчкой кода :)

  11. Aleksandr January 25th, 2008 21:31

    Если это нужно только для одного поля, то да. А если сайт большой и таких полей куча, то мой способ куда эффективнее. ;)

  12. Алексей January 26th, 2008 20:37

    чет навернуто слишком. единственная полезная вещь в данном случае - это утилита $$() прототайпа ну и перебор по массиву с each.

  13. Scripe April 16th, 2008 18:00

    - меньше букв :)

Leave a reply