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!

Comments

  1. Color picker en HTML5 | Dupermag Says:

    March 28th, 2013 at 12:54 pm

    […] 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:

    January 2nd, 2014 at 5:03 am

    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:

    January 2nd, 2014 at 9:12 am

    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.

Comments are closed. Please contact me instead.