skip to content

JavaScript: Tweaking the HTML5 Color Input

 Tweet Share0 Tweets

Now that the HTML5 colour input enjoys support in most browsers, we can throw away those clunky JavaScript colour-picking plugins and just let the browser do the work.

Only sometimes we want to be able to be able to see and edit the hex code directly rather than only using the O/S user interface.

Working Example

Here we have a simple form where a colour name and hex code can be entered or updated. The form contains an input field with type="color" which would normally only display a colour swatch, but we have some JavaScript running in the background with appends a linked text input, as you can see:

Colour Details

If you're not familiar with current browser behaviour, what our script is adding is this text field alongside the color input element:

HTML5 colour input with added text field (screenshot)

The two fields are linked so that changing either one will update the other. When the form is submitted, however, the new field will be ignored because it has no name or id attribute.

You'll see that we've added a pattern to the text input field which will trigger HTML5 Form Validation.

HTML FORM markup

As stated earlier, all you need for this to work is an HTML5 colour input somewhere on the page. Here is the skeleton HTML markup for the above form:

<form method="POST" action="#"> <p>Colour Name: <input type="text" size="32" name="name" value="Aluminium"><br> Colour: <input type="color" size="32" name="color" value="#b5b5b5"><br> <input type="submit" value="Save Changes"></p> </form>

Note that the color input field defaults to #000000 (Black) rather than blank/null. If you want to allow blank values to be submitted or recorded you will need to work around that.

JavaScript Source Code

The script that does this can be applied on page load. It scans the entire page for any color input fields and attaches a text field to any found:

<script> // Original JavaScript code by Chirp Internet: www.chirp.com.au // Please acknowledge use of this code by including this header. window.addEventListener("DOMContentLoaded", function(e) { var arr = document.getElementsByTagName("input"); for(var idx in arr) { if(arr[idx].type == "color") { var el = arr[idx]; var newEl = document.createElement("input"); newEl.size = 8; newEl.value = el.value; newEl.pattern = "#[0-9A-Fa-f]{6}"; newEl.style.marginLeft = "0.5em"; el.insertAdjacentElement("afterend", newEl); newEl.addEventListener("change", function(e) { el.value = e.target.value; }.bind(el), false); el.addEventListener("change", function(e) { newEl.value = e.target.value; }.bind(newEl), false); } } }, false); </script>

This code can be included anywhere on the page or in an external file. It will run only once, when the page has finished loading.

Please feel free to use and adapt this code for your purposes, and you can contact us with any comments or questions using the button below.

References

< JavaScript

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

Post your comment or question
top