Input Type=Color Polyfill

My jQuery Colorpicker – Spectrum now has a mode that acts as a polyfill to input type=color.

What this means

Now that the color input is supported in Chrome nightlies, along with Opera, people may want to start using this cool new form element.

While you can still customize the colorpicker and bend it to your will, if you’d like to use this new mode just include the HTML:

<input type='color' value='#4499f0' />

Along with a reference to spectrum.js and spectrum.css:

<link rel='stylesheet' href='spectrum.css' />
<script type='text/javascript' src='spectrum.js'></script>

Demo

See the color input polyfill demo page for more info!

Tags: , , ,

3 Responses to “Input Type=Color Polyfill”

  1. Color picker en HTML5 | Dupermag Says:

    […] quieres puedes empezar a usar este control desde hoy para los usuarios que lo soporten y dejar que un polyfillse encargue de los demás pobres […]

  2. Jip de Beer Says:

    I’d like to use the spectrum color picker as fallback for the native color picker implemented in Google Chrome for Android. The spectrum color picker will be used by iOS users. The described way of providing a fallback works! However, I’d like to set some options such as clickoutFiresChange: true, showButtons: false and if possible also bind to the move event. Thus my question is: how can I use the native color picker when available (Chrome) and use spectrum with advanced options when it’s not available (Safari Mobile)?

  3. Jip de Beer Says:

    To answer my own question:

    $('#colorPicker').spectrum({
    			showButtons: false,
    			clickoutFiresChange: true,
    			move: function(color) {...}
    		});

    Where colorPicker is the ID of the native color picker that got replaced by the spectrum color picker.
    The only problem I’m still having is that clickoutFiresChange doesn’t work on mobile Safari.
    The clickout doesn’t close the color picker…

    On Firefox it’s working.

Leave a Reply

Posting Code: Use html such as <pre lang='javascript'></pre>. See all supported languages.

CAPTCHA Image
*