JavaScript Color Picker Events
Events
Easily manage and customize events in your JavaScript color picker to create dynamic and responsive interactions for your application.
| Method | Description |
|---|---|
| onchange | Triggered when the color value changes. (HTMLElement element, String color) => void |
| onclose | Triggered when the color picker is closed. (HTMLElement element) => void |
| onopen | Triggered when the color picker is opened. (HTMLElement element) => void |
Example
Define custom actions when a color is selected or when the picker opens or closes:
<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>