• Главная»
  • Уроки»
  • jQuery»
  • Используем jQuery для изменения стилей поля ввода формы при нажатии

Используем jQuery для изменения стилей поля ввода формы при нажатии

Многие формы скучные и простые, не позвольте Вашей форме быть такой же. Этот урок покажет Вам как можно их улучшить с помощью классов CSS и значений по умолчанию, которые меняются в зависимости от выбора элемента формы.

Цель

Мы хотим сделать форму с полями для ввода, которые бы меняли свой внешний вид при нажатии. Давайте начнем, но прежде взглянем на пример.

Шаг №1 - Подготовка

Для начала необходимо подготовить саму форму.

<form>
<input name="status" id="status" value="Введите что-то здесь" type="text"/>
<input value="Submit" type="submit"/>
</form>

Я ввел "Введите что-то здесь" как значение по умолчанию для ввода. Это текст, который будет отображаться в форме, но при нажатии он исчезнет.

Шаг №2 - CSS

Теперь давайте сделаем форму красивой. Тут уже можно оформить все по Вашему вкусу, но обязательно необходимо включить классы для неактивного\активного состояния формы. Для этого я использовал значения idleField и focusField.

<style type="text/css">
*{
margin:0;
padding:0;
font:bold 12px "Lucida Grande", Arial, sans-serif;
}
body {
padding: 10px;
}
#status{
width:50%;
padding:10px;
outline:none;
height:36px;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
</style>

Также важно заметить, если Вы хотите убрать голубое свечение, которое отображается в Safari вокруг поля ввода при нажатии мышкой, Вам необходимо включить в CSS файл следующее значение outline:none.

Шаг №3 - jQuery

Эта часть добавит в Вашу форму эффект при нажатии. Нам необходимо достичь 2-х результатов: 1) Выбранное поле должно перейти из неактивного в активное состояние, и при этом должен поменяться CSS класс; 2) Текст по умолчанию ("Введите что-то здесь") должен исчезнуть. Также мы хотим, чтобы поле теряло фокус (не выделялось) при переходе на следующий элемент страницы или формы.

$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});

Давайте подробно рассмотрим каждую часть:

Для каждого текстового поля применить класс idleField

$('input[type="text"]').addClass("idleField");

Когда на поле нажимают мышкой, необходимо удалить неактивный стиль и добавить активный.

$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
});

Когда пользователь нажимает на поле, мы хотим чтоб текст "Введите что-то здесь" исчезал, если юзер еще ничего не ввел.
Следующий код сверяет текст формы с текстом по умолчанию. Если текст совпадает, скрипт удаляет его из формы.

if (this.value == this.defaultValue){
this.value = '';
}

Если пользователь уже что-то напечатал в поле, текст не удаляется, а выделяется. За это отвечает код:

if(this.value != this.defaultValue){
this.select();
}

Код ниже описывает правила про то, что должно случиться, когда пользователь отводит мышку и переходит дальше.

$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});

Стоит обратить внимание на использование $.trim(). Данная функция убирает пробелы до и после текста, введеного юзером. Имейте ввиду, что если пользователь ничего не заполнит в  форме, а оставит текст по умолчанию, тогда форма все равно обработается. Можно исправить это с помощью специального скрипта проверки при нажатии кнопки "Отправить".

P.S. Примечания от переводчика. Если Вы не знаете как и куда вставлять код jQuery, то пройдите первые уроки бесплатного видеокурса Евгения Попова - "jQuery для начинающих" здесь.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 17 Марта 2009
Просмотров: 66237
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 17 Марта 2009 20:19
    Дмитрий
    Я первый))) Визуальное оформление действительно оставляет соответствующее мнение о сайте. Всё более чем понятно. По аяксу будут уроки?
  • 18 Марта 2009 13:07
    nikolas
    да, очень хотелось бы уроков по аяксу.
  • 18 Марта 2009 15:11
    Дмитрий
    И не только по аяксу... Мне кажется, мы многого хотим...
  • 19 Марта 2009 13:09
    Максим
    будут уроки и по аяксу ))) Специально для Вас найду и переведу. Главное - оставайтесь с нами :)
  • 19 Марта 2009 14:52
    Дмитрий
    Непременно останемся...=)
  • 26 Марта 2009 15:13
    DemonArt
    Я всё зделал, но вот одного не понял куда вставлять вот этот код: $(document).ready(function() { $('input[type="text"]').addClass("idleField"); $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value == '')){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); }); Я попробовал между тегов : <script> </script> Не помогло, подскажите плиз...
  • 26 Марта 2009 15:55
    Сергей_Патин
    Записать его между тегами: <script type="text/javascript"> </script> И вставить все это делj между тегами <head></head>
  • 26 Марта 2009 20:55
    DemonArt
    Спасибо помогли!!!
  • 27 Марта 2009 13:03
    max
    А как для поля ввода текста сделать как у вас <textarea>
  • 16 Мая 2009 19:48
    ABCD
    А почему работает только для <... id=status name=status>? Если у меня другие имя и ИД?
  • 16 Мая 2009 20:21
    ABCD
    вместо input[type=text] прописать textarea!
  • 12 Марта 2010 22:59
    Сергей
    почему нельзя просто использовать :focus?
  • 19 Ноября 2010 20:13
    Evgeniy
    Кодировка в примере ни какая.
  • 24 Июля 2011 21:20
    Deadcow
    К вопросу о юзабилити, так же можно по событию onBlure делать проверку правильности введенной информации (проверка мыла, или проверка на существование пользователя в бд) и добавлять в стили мягкий светло-зеленый в случае прохождения проверки или светло-красный фон. Можно даже выполнять проверку по событию onChange, тогда получится интересный эффект, фон будет меняться прямо во время набора. А вообще, статья ни о чем. Основы основ, ничего интересного. Хоть бы для полноты примера еще к submit-у стили прописали
  • 2 Декабря 2011 11:15
    gomer505
    Приведенный здесь код jQuery отличается от того который есть на диске javascript + jQuery в домашнем задании к уроку №97,а тот - вот он:
    $(document).ready(function(){ var myEmail = $('#email'); myEmail.focus(function(){ if($(this).val()== $(this).attr('defaultValue')){ $(this).val(''); } }); myEmail.blur(function(){ if($(this).val()== '') {	$(this).val($(this).attr('defaultValue')); } });
    простите, у меня не работает.Хотя у Евгения все работает, как часики. Могли бы Вы пояснить в чем разница. На форуме поддержки мертвая тишина по этому поводу уже больше недели - столько же я бьюсь над этим.
    • 25 Апреля 2012 15:28
      LinkinPark
      А вообще оно работает?)) Я спецом взял все сделал один в один) не работает(( Меня интересовал вопрос "исчезновение текста при нажатии на текстовое поле", сделал все проще чисто через HTML, onfocus="if(this.value=='Введите что-то здесь') this.value='';" onblur="if(this.value=='') this.value='Введите что-то здесь';"
  • 24 Января 2014 02:17
    dickist
    Кто-нибудь знает что это? (в Шаг №2 - CSS)
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    font:bold 12px "Lucida Grande", Arial, sans-serif;
    }
    .....
    
    и для чего?
^ Наверх ^