Обработчик событий для элемента ввода цвета html5

18

Использование нового элемента input="color" в Chrome запускает новый всплывающий диалог:

Я хотел бы знать, есть ли обработчик событий, который срабатывает, как только изменяется значение в этом окне предварительного просмотра, а не только после нажатия «ОК»

jQuery('#colorinput').on('change', function() { // fires only after clicking OK
    jQuery('#main').css('background-color', jQuery(this).val()); 
 });​

См. Ссылка

    
задан Riesling 10.12.2012 в 18:03
источник

3 ответа

14

Что вы ищете, это input event .

Ваша измененная скрипка теперь должна работать во всех (приличных) браузерах:

$('#colorinput').on('input', function() { ... } )
    
ответ дан Marc-André Lafortune 03.09.2014 в 19:20
  • К сожалению, Google Chrome, похоже, больше не поддерживает это событие на дату этого комментария. –  Aaron Cicali 24.11.2015 в 22:58
  • @acicali: Я считаю, что вы ошибаетесь. Моя скрипка по-прежнему работает с последним выпуском –  Marc-André Lafortune 25.11.2015 в 02:07
  • Извините, я неправильно понял скрипку. Событие ввода, кажется, просто отражает событие изменения в этом случае, я ожидал другого поведения. –  Aaron Cicali 25.11.2015 в 23:17
  • Кажется, что не работает в Chrome 49.0.2623.87 –  jave.web 01.04.2016 в 12:50
  • @ Marc-AndréLafortune это работает ПОСЛЕ того, как нажимать OK .... не при выборе цвета WHILE colorpicker открывается :) –  jave.web 01.04.2016 в 21:12
Показать остальные комментарии
1

Вам действительно нужно вводить событие для спецификации HTML. Ничто не гарантирует, что событие изменения должно срабатывать до того, как элемент ввода потерял фокус.

"Событие ввода срабатывает всякий раз, когда пользователь модифицировал данные элемента управления. Событие изменения срабатывает, когда значение зафиксировано, если это имеет смысл для элемента управления, или когда управление теряет фокус."

    
ответ дан anon 03.09.2014 в 19:34
-1

Чтобы получить значение цветового ввода, вы должны использовать атрибут события onchange , указанный в w3school

<input name="eventColor" type="color" onchange="getColorVal(eventColor.value)"/>

и определите функцию, обрабатывающую событие

 function getColorVal(colorValue){

     alert(colorValue);
}
    
ответ дан palAlaa 17.01.2013 в 12:07
  • Как насчет того, чтобы вместо этого использовать $ ('# idname'). change (); мероприятие? –  shubniggurath 28.10.2013 в 19:07
  • Это не ответило на вопрос в этом сообщении, onchange запускается только после того, как ok нажмите кнопку –  Naga 25.07.2014 в 11:37
  • Inline Javascript следует избегать (см. этот ответ SO). –  thirdender 18.02.2015 в 02:37