Оформление полей ввода. CSS и JavaScript
Задача: оформить поля ввода и обработать их события при фокусе и при наведении курсора мыши
Решение
В CSS2 существуют селекторы атрибутов, с помощью которых можно задавать стиль для конкретных элементов HTML и обрабатывать их события.
К примеру:
input[type=text] {
border:1px solid #999;
}
Такой стиль задаст всем полям ввода с атрибутом text рамку цвета #999.
А с помощью такого стиля можно обрабатывать наведение курсора на поле ввода:
input[type=text]:hover {
border:1px solid #900;
}
К сожалению, селекторы атрибутов не поддерживаются IE вплоть до версии 6, поэтому ниже приведенный пример оформления полей ввода, пользователи этих браузеров не увидят. Для них существует альтернативный способ, который будет рассмотрен в этой же статье.
Пример
Сначала создаем элементы формы:
<input type=”text” size=”50″ />
<textarea class=”area”></textarea>
Задаем стиль для полей ввода, с помощью селекторов атрибутов и правил для элементов textarea и input.
input[type=text], input[type=password], textarea {
border: 1px solid #777;
}
textarea {
overflow: auto;
vertical-align: middle;
width: 400px;
height: 80px;
}
input {
vertical-align: middle;
}
С помощью CSS обрабатываем события полей ввода при наведении курсора.
input[type=password]:hover, input[type=text]:hover, textarea:hover {
background: #ffffe1;
border: 1px dashed #555;
}
И наконец, обрабатываем поведение полей при фокусе.
input[type=password]:focus, input[type=text]:focus, textarea:focus {
background: #f8f8f8;
border: 1px solid #999;
}
Результат:
Пример для IE с помощью JavaScript
Так как IE не поддерживает селекторы атрибутов, то для оформления полей ввода ничего не остается, как использовать классы. Иначе указав правило, например, для всех элементов input, помимо текстовых полей будут изменены и кнопки форм. Ну, а для textarea создаем правило.
IE не поддерживает в CSS обработку событий элементов, поэтому придеться воспользоваться JavaScript, но только для обработки фокуса. Обработка наведения курсора мыши по событию onmouseover для полей ввода это неправильный ход.
Итак, создаем две функции JavaScript. Первая функция обрабатывает событие при фокусе элемента – onfocus, заменяя класс элемента, на тот который необходим для этого события. В данном случае на класс “onfocus”:
function onFocus(item) {
document.getElementById(item).className = ‘onfocus’;
}
Вторая функция обрабатывает событие при потери фокуса – onblur. В данном случае функция заменяет класс элемента на “input”, заданный в хтмл изначально:
function onBlur(item) {
document.getElementById(item).className = ‘input’;
}
CSS стиль будет выглядеть так:
textarea {
overflow: auto;
width: 400px;
height: 80px;
padding:2px;
}
/* класс при фокусе */
.onfocus {
background: #f8f8f8;
border:1px solid #999;
padding:2px;
}
/* класс по умолчанию */
.input {
border:1px solid #777;
padding:2px;
vertical-align:middle;
}
И в хтмл коде для элементов задаем класс “input”, а также функции для событий onblur и onfocus, передавая функциям идентификатор элемента:
<input type=”text” id=”field” onblur=”onBlur(‘field’)” onfocus=”onFocus(‘field’)” size=”50″ />
<textarea id=”area” onblur=”onBlur(‘area’)” onfocus=”onFocus(‘area’)”></textarea>
По материалам сайта clone.h16.ru
If you found an error, highlight it and press Shift + Enter or click here to inform us.
Загрузка ...