В этом уроке я расскажу, как с помощью jQuery можно сделать выделение элемента формы при ее заполнении. Таким образом, заполнение форм будет намного удобнее для посетителей Вашего сайта.
Шаг 1.
Подключим фреймворк jQuery к нашему документу, прописав следующий код между тегами <head>:
<script type="text/javascript" src="jquery.js"></script>
Шаг 2.
Затем вставим следующий код скрипта:
<script>
$(document).ready(function()
{
$('.content .left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.content').addClass("over");
}).blur(function(){
$(this).parents('.content').removeClass("over");
});
$('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});
</script>
Шаг 3.
Между тегами head или в отдельном CSS файле напишем следующие стили:
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content, .contentA{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
td{
vertical-align:top;
}
.over{
background-color:#e6e2af;
}
.out{
background-color:none;
}
Здесь очень важен стиль .over. Именно он отвечает за фон выделения формы. Изменяя этот стиль, вы можете сделать нужный вам цвет выделения.
Шаг 4.
Непосредственно сама форма представляет собой следующий код:
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
Если Вы хотите, чтобы элементы формы выделялись по отдельности, то блоку нужно придать класс contentA вместо content.