2012-12-10 14 views
17

użyciu nowego wejścia = „color” elementu w Chrome uruchamia nowe okno podręczne:obsługi zdarzeń dla elementu wejściowego koloru html5

screenshot color dialog

chciałbym wiedzieć, czy istnieje procedura obsługi zdarzenia odpala tak szybko, jak wartość w tym oknie podglądu zmian, a nie tylko po kliknięciu na przycisk „OK”

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

Zobacz http://jsfiddle.net/Riesling/PEGS4/

Odpowiedz

13

Co szukasz jest input event.

Twój modified fiddle powinien działać we wszystkich przeglądarkach (porządnych):

$('#colorinput').on('input', function() { ... }) 
+0

Niestety, Google Chrome nie obsługuje już tego zdarzenia od daty tego komentarza. –

+1

@acicali: Wierzę, że się mylisz. Moje skrzypce wciąż działają w najnowszym wydaniu. –

+0

Przepraszam, źle zrozumiałem skrzypce. Zdarzenie wejściowe wydaje się po prostu odzwierciedlać zdarzenie zmiany w tym przypadku, oczekiwałem innego zachowania. –

-1

Aby uzyskać wartość wejścia kolorów, należy użyć atrybutu zdarzenia onchange przewidzianego w w3school

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

i zdefiniować funkcję obsługi zdarzenia

function getColorVal(colorValue){ 

    alert(colorValue); 
} 
+0

A może zamiast tego zrobić $ ("# idname"). Change(); zdarzenie? – shubniggurath

+1

To nie odpowiadało na pytanie w tym poście, zmiana jest wyzwalana dopiero po kliknięciu przycisku OK – Naga

+0

Należy unikać wbudowanej obsługi JavaScript (patrz [to odpowiedź SO] (http://stackoverflow.com/a/21975639/379160)). – thirdender

1

Naprawdę chcesz zdarzenia na wejściu HTML spec. Nic nie gwarantuje zmiany zdarzenia na ogień, zanim element wejściowy utraci ostrość.

„Zdarzenie wejściowe kiedy użytkownik zmodyfikował dane z kontroli. Zdarzenie zmienia się, gdy wartość jest popełniane, jeśli to ma sens dla kontroli, albo gdy kontrola traci ostrość.”

Powiązane problemy