Изменение стиля текстового поля при фокусе



jquery input Я часто пользуюсь браузером Google Chrome и мне нравится, как в нем реализовано взаимодействие пользователя с HTML-формами. Объясню более подробно, при фокусе в каком-либо поле, границы поля меняют цвет на более заметный. На мой взгляд, это очень удобно, при заполнении форм. Особенно когда человек сильно устал или плохо видит. Для реализации подобного эффекта мы будем использовать jQuery.

Для начала создадим простую форму, с несколькими текстовыми полями.

<form>
		<table>
			<tr>
				<td>Имя</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Почта</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>Сайт</td>
				<td><input type="text"/></td>
			</tr>
		</table>
	</form>

Теперь добавим стиль для текстовых полей. Фон будет выделяться #ffeeac, а граница #aa88ff.

<style type="text/css">
   .focus {
   border: 2px solid #aa88ff;
   background-color: #ffeeac;
}
</style>

Для создания эффекта измения стиля, мы будем использовать два события: focus и blur. При фокусе мы добавляем класс .focus, при блюре убираем. Не забудьте подключить jQuery.

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

Посмотреть получившийся результат можно, на приведенном ниже примере.
Demo



Теги: , ,

Комментарии

  1. омгвтф, зачем jquery? В css же есть встроенная фишка изменения стиля формы при фокусе или наведении:

    input {
    border: 2px solid #ccc;
    background-color: #fff;}

    /*====ФОКУС====*/
    input:focus {
    border: 2px solid #aa88ff;
    background-color: #ffeeac;}

    /*==НАВЕДЕНИЕ==*/
    input:hover {
    border: 2px solid #aa88ff;
    background-color: #ffeeac;}

    Reply

  2. TeraSyntax, затем, что есть нестандартная реализация input полей

    Reply

Оставить комментарий