В HTML 5 к давно привычным элементам формы был добавлен элемент range — ввод значения из диапазона.
Элемент отображается в виде ползунка:
Он поддерживает все стандартные события, в том числе и onchange, которое интересует меня в данной статье.
Событие range onchange
Особенность данного event в том, что вызывается оно после того, как пользователь отпустил ползунок. Событие не позволяет отследить все манипуляции, которые производит пользователь, пока выбирает нужное значение.
Данное событие генерируется всеми современными браузерами, т.е. его использование обеспечит «кроссбраузерность» вашей задаче.
Событие range oninput
Большая часть браузеров (вернее, все, кроме IE 11) генерирует ещё одно событие для данного HTML элемента — oninput. В отличии от onchange, данный event создаётся и в промежуточных состояниях, пока пользователь двигает ползунок.
Это событие позволяет визуализировать выбор значения пользователем.
Для работы во всех браузерах рекомендуется запрограммировать оба события.
|
|
<input type="range" min="0" max="100" step="1" oninput="console.log(this.value)" onchange="console.log(this.value)"> |
Данная запись опубликована в 31.07.2017 13:04 и размещена в рубрике Программирование.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Февраль 16, 2020 г.
Ставший уже привычным элемент навигации внутри страницы - кнопка "Вернуться к началу страницы". Разберем как реализовать эту функцию.
План следующий:
Создать HTML код кнопки; (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы. ...
Читать
Апрель 27, 2019 г.
Довольно удобно и просто удалять лишние параметры на этапе обработки запроса Varnish, если вы используете его на вашем веб сервере. Давайте посмотрим как это делается.
Описанное ниже выполнялось для Varnish версии 4.
Допустим вам нужно избавиться ...
Читать
Сентябрь 8, 2009 г.
Каждый год, обычно весной, просят у меня исходники по задаче комивояжера. А я их давно сам не видел, что называется, и вроде как отмораживаюсь, говорю - куда дел, не знаю. Но тут разгребал проекты по работе и наткнулся на избранные архивы дельфийских ...
Читать
Сентябрь 10, 2015 г.
Мне казалось, что это естественная фича сотовых, когда тыкаешь в какое то число на странице сайта в мобильном браузере - он пытается с ним что то делать, предлагая свои обычные варианты - послать СМС или позвонить.
Оказалось, что это не совсем ...
Читать
How to set the default value for range from a variable that has been read from the database?
It depends on how you build template.