С появлением различных javascript фреймворков, разработчикам стало намного проще создавать интерактивные пользовательские интерфейсы. Сюда так же можно отнести взаимодействие пользователя с формами. Наверное, уже практически во всех популярных cms, появилась возможность проверки с помощью AJAX’а введеных данных. В своем посте я подготовил 5 простых примеров, показывающих, как с помощью jQuery можно сделать формы более интерактивными.
Счетчик символов
Первый пример — это счетчик символов. Ниже представлен результат (попробуйте что-нибудь ввести в поле):
Код примера:
<script type="text/javascript"> $(function() { $("input[id='input-text']").keyup(function count(){ counter = $("input[id='input-text']").val().length; $("#count").html("Всего символов: "+counter); }); }); </script> <input type="text" id="input-text"/><span id="count"></span>
При событии keyUp(), переменной counter присваевается значение, равное количеству символов в поле. После чего используя метод html() добавляем значение в элемент span.
Ограничитель символов
Этот пример, очень похож на первый. С той лишь разницей, что здесь добавлено ограничение на количество вводимых символов.
Код примера:
<script type="text/javascript"> $(function() { $("input[id='input-text-2']").keyup(function countRemainingChars(){ maxchars = 10; //Ограничение в 10 символов counter = $("input[id='input-text-2']").val().length; if(counter <= maxchars){ $("#count-2").html(maxchars-counter + " символов осталось"); } if(counter == maxchars) { $("#input-text-2").attr({ maxlength: maxchars}); } }); }); </script> <input type="text" id="input-text-2"/> <span id="count-2"></span>
Максимальное количество вводимых символов задается в переменной maxchars. Как только количество символов достигает 10, к текстовому полю добавляется атрибут maxlength.
Простая валидация поля
Этот пример показывает, как можно сделать простую валидацию формы. Сообщение об ошибке выводится, если после потери фокуса, поле осталось пустым.
Код примера:
<script type="text/javascript"> $(function() { $("input[id='input-text-3']").blur(function validate(){ el = $("input[id='input-text-3']"); inputString = el.val(); if(inputString==""){ $("#msg").css({ "color": "red", }); $("#msg").html(" Вы должны заполнить поле"); } else { $("#msg").css({ "color": "green", }); $("#msg").html(" Ок"); } }); }); </script> <input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>
При событии blur(), проверям введены ли символы в поле или нет. Если введены то выводим сообщение Ок, иначе сообщение о ошибке.
Выбор значений из списка
Этот пример, показывает, как можно легко добавлять значения в поле. Нечто подобное есть при выборе меток (тегов) в wp или в социальных закладках. Кликните по названию фруктов.
Код примера:
<script type="text/javascript"> $(function() { $("ul[id='values'] li").click(function suggestValues(){ input = $("input[id='input-text-4']"); el = $(this).html(); $(this).remove(); newinput = input.val(); newinput = (newinput + el + ", "); input.val(newinput); }); }); </script> <input type="text" id="input-text-4" size="40"/> <ul id="values" style="list-style-type: none; margin-left: 0; padding-left: 0;"> <li>Яблоко</li> <li>Апельсин</li> <li>Клубника</li> </ul>
Для добавления значений в поле используем событие click(). При клике берем значение из списка и добавляем в текстовое поле.
Добавление элементов в список
В этом примере, в отличие от предыдущего значения выбираются из выпадающего списка.
Код примера:
<script type="text/javascript"> $(function() { $("#submit-list").click(function selectItem(){ s = $("option:selected") el = s.text(); destination = $("#selected-items-list"); $(destination).append('<li>'+el+'</li>'); $(destination +':last').css('display', 'none').fadeIn(1000); $("option:selected").remove(); if($('#my-list option').length==0){ $('input[id=submit-list]').attr('disabled', 'disabled'); } }); }); </script> <select id="my-list"> <option value="1">Яблоко</option> <option value="2">Апельсин</option> <option value="3">Клубника</option> </select> <input type="button" id="submit-list" value="Добавить"/> <ul id="selected-items-list" style="list-style-type: none; margin-left: 0; padding-left: 0;"></ul>
После того, как вы нажали кнопку добавить, значение добавлется в список с помощью метода append(). Так же при внесении значений в список, я добавил fadeIn() эффект.
- jQuery: полезные примеры, при работе с DOM
- Выделение всех элементов checkbox с помощью jQuery
- Русско-английский переводчик, с помощью Google AJAX Language API
- Работа с JSON в PHP и jQuery
- jQuery JSON: получаем данные из твиттера
Теги: JavaScript, jQuery
http://habrahabr.ru/blogs/jquery/86604/ а вот тут меня ругали за картинку — 😉
Reply
@porcelanosa
Умеете вы завлекать людей 🙂
Reply
С инпутом все ясно, а ты попробуй подсчитать кол-во символов в текстарии! И увидишь, что служебные символ ява-скрипт не считает, например перенос строки, табуляция и тд. И когда происходит валидация на стороне сервера, например средствами php, то разница в длине будет!!!
Reply
@Максим Нагайченко
Вот пример — http://www.ajaxray.com/blog/2007/11/09/interactive-character-limit-for-textarea-using-jquery/, в котором автор прекрасно справляется с подсчетом символов в текстарии.
Reply