A tiny, dependency-free, color input field helper that utilizes the native color picker.
Visit https://kolorfield.js.org
Download the latest version of kolorfield and then place the following HTML in your page's head element:
<script type="text/javascript" src="dist/kolorfield.min.js"></script>
<link rel="stylesheet" href="dist/kolorfield.min.css" />
CDN (Courtesy of jsDelivr)
Place the following HTML in your page's head element (check to make sure the version in the URLs are the version you want):
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kodie/[email protected]/dist/kolorfield.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/[email protected]/dist/kolorfield.min.css" />
npm install kolorfield --save
// ES6
import kolorfield from 'kolorfield'
// CommonJS
const kolorfield = require('kolorfield')
gpm install kodie/kolorfield --save
bower install kodie/kolorfield --save
<div class="kolorfield">
<input type="color" id="main-color" value="#5185b3">
<button type="button" class="kolorfield-open kolorfield-value" data-kolorfield-style-prop="background-color"></button>
</div>
Initiates kolorfield on any element that has the kolorfield
class. This should be a container around your color input.
window.addEventListener('load', function () {
kolorfield()
})
-
The
kolorfield-input
class - Any input element with this class will have it's value set to the selected color any time the color is changed. The color will also be set to any value that is entered into this input field. -
The
kolorfield-open
class - Any element with this class will open the color picker when clicked. -
The
kolorfield-value
class - Any element with this class will have it's text content set to the color when the color is changed. If this element is an input, it's value will be updated instead of text content. -
The
data-kolorfield-style-prop
attribute - Set this attribute to a style property (likebackground
orcolor
) on an element to have it's style updated when the color is changed. Multiple style properties can be defined by separating them with a comma (ie.background,color
).
The containing kolorfield element (the element with the kolorfield
class) will have the following methods attached to it available for use:
var color = document.querySelector('.color')
color.open() // Opens the color picker
color.set('#00ff00') // Sets the color
var currentColor = color.get() // Gets the current color
// The `change` event bubbles up to the containing element so you can detect changes like so:
color.addEventListener('change', function () {
document.body.style.setProperty('--color', event.target.value)
})
-
filebokz - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.
-
growfield - A tiny, dependency-free JavaScript module for making textarea elements grow with their content.
-
hashjump - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.
-
kloner - A tiny, dependency-free JavaScript module for cloning/repeating elements.
-
minitaur - The ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.
-
peekfield - A dependency-free, easy to use, JavaScript plugin for hiding and showing fields.
MIT. See the license file for more info.