Skip to content

JavaScript Color Picker Events

Events

Section titled “Events”

Easily manage and customize events in your JavaScript color picker to create dynamic and responsive interactions for your application.

MethodDescription
onchangeTriggered when the color value changes.
(HTMLElement element, String color) => void
oncloseTriggered when the color picker is closed.
(HTMLElement element) => void
onopenTriggered when the color picker is opened.
(HTMLElement element) => void

Example

Section titled “Example”

Define custom actions when a color is selected or when the picker opens or closes:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/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>

More Examples

Section titled “More Examples”
Section titled “Related Documentation”