Формы
• 125
ПРИМЕЧАНИЕ
В
первом издании этой книги мы говорили о
onforminput, но с тех пор этот обработчик событий
впал в немилость Однако не пугайтесь, все сказанное в этом разделе все так же имеет силу, так
как очень похожий обработчик событий
oninput входит в спецификацию HTML5 и его можно
применять почти так же, как
onforminput
Например, если бы мне нужно было создать поле выбора цвета одновременно в
модели
RGBA и HSLA, мне бы, скорее всего, пришлось добавить приемник событий к каждому
ползунку. Но с помощью события
oninputchange
я могу добавить один обработчик со-
бытий к форме и пересчитать значения RGBA и HSLA одним методом.
Результат использования одного или нескольких обработчиков событий будет выглядеть
почти одинаково. Однако вариант без дублирования обработчиков событий выглядит
лучше и аккуратнее.
При передвижении ползунка будут сгенерированы значения RGBA и HSLA, и образец цвета
будет обновлен. Ниже приведен JavaScript-код, который для этого потребуется.
form.oninput = function () {
var i = this.length, values = [], value = 0;
while (i--, value = this[i].value) {
if (this[i].type == 'range') {
switch (this[i].name) {
// значение alpha_channel может быть от 0 до1
case 'alpha_channel': values.push(value / 100);
¬ break;
// hue — это
простое значение от 0 до 360
case 'hue': values.push(value); break;
// default включает процентные значения насыщенности
¬ и яркости
default: values.push(value + '%');
}
}
}
hsla.value = 'hsla(' + values.reverse().join(', ') + ')';
preview.style.backgroundColor = hsla.value;
rgba.value = getComputedStyle(preview, null).
¬ backgroundColor;
};
В итоге мое поле выбора цвета использует тип ввода данных
range
, новое событие
oninput
и новые элементы вывода для отображения значения (хотя это можно было сделать с по-
мощью
.innerHTML
). Результат показан на рис. 3.14.
Относительно события
oninput
особенно важно отметить, что, в
отличие от
onchange
,
которое срабатывает, только когда элемент
заполнен (хотя исторически некоторые браузеры
понимали это неправильно и заставляли событие срабатывать во время ввода — удиви-
тельно, но в
этом списке нет IE!),
oninput
срабатывает, пока пользователь вводит данные
в форму, то есть непосредственно в то время, пока изменения вносятся.
