Javascript Color Picker Events

Events

Method	Description
onchange	Method executed when a value is changed. (HTMLElement element, String color) => void
onclose	Method executed when the color picker is closed. (HTMLElement element) => void
onopen	Method executed when the color picker is opened. (HTMLElement element) => void

Example

Create actions when the color is selected and the picker is opened or closed.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<input id="color-picker" />

<script>
jSuites.color(document.getElementById('color-picker'), {
    onchange: function(el, val) {
        el.style.color = val;
    },
    onopen: function(el) {
        console.log('Opened');
    },
    onclose: function(el) {
        console.log('Closed');
    },
    placeholder: 'COLOR',
    closeOnChange: true,
});
</script>
</html>

Edit this page on GitHub