Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kubetail-org/hookahjs
Add empty/dirty/touched CSS hooks to input and textarea elements automatically (1056 bytes)
https://github.com/kubetail-org/hookahjs
css css-hooks forms input javascript
Last synced: 5 days ago
JSON representation
Add empty/dirty/touched CSS hooks to input and textarea elements automatically (1056 bytes)
- Host: GitHub
- URL: https://github.com/kubetail-org/hookahjs
- Owner: kubetail-org
- License: mit
- Created: 2017-09-14T06:40:18.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T03:55:57.000Z (over 1 year ago)
- Last Synced: 2024-10-14T05:55:08.304Z (about 1 month ago)
- Topics: css, css-hooks, forms, input, javascript
- Language: JavaScript
- Homepage:
- Size: 376 KB
- Stars: 20
- Watchers: 4
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Authors: AUTHORS.txt
Awesome Lists containing this project
README
# HookahJS
HookahJS is a tiny JavaScript library that monitors all input and textarea elements on your page and adds `empty/dirty/touched` CSS hooks to each element automatically.
## Introduction
HookahJS is a tiny JavaScript library that monitors all input and textarea elements on your page and adds the following CSS classes in response to user interactions with each element:
* `hkjs--empty` - control element is empty
* `hkjs--not-empty` - control element is not empty
* `hkjs--pristine` - control element has not seen an `input` or `change` event
* `hkjs--dirty` - control element has seen an `input` or `change` event
* `hkjs--untouched` - control element has not seen a `blur` event
* `hkjs--touched` - control element has seen a `blur` event
HookahJS uses CSS @keyframes to detect new DOM elements so once the library is loaded, it will automatically add CSS hooks to new input and textarea elements. HookahJS is 1056 bytes (minified + gzipped).
## Quickstart
To use HookahJS you only need to add `hookah.js` to your page and the library will automatically add event listeners to all current and future input and textarea elements. The following example will draw a red box around an invalid input box after the user has touched the element:
```html
.hkjs--touched:not(:valid) {
border: 1px solid red;
}
```
[View Demo »](https://jsfiddle.net/muicss/y4eat0hu/)
HookahJS uses CSS @keyframes to detect new DOM elements so once the library is loaded, it will automatically add CSS hooks to new input and textarea elements.
## Browser Support
* IE10+
* Opera 12+
* Safari 5+
* Chrome
* Firefox
* iOS 6+
* Android 4.4+
Note: HookahJS uses CSS @keyframes to detect new DOM elements automatically. To use HookahJS in IE9 you can initialize DOM elements explicitly with `hkjs.init()`.
## Documentation
### How to load HookahJS
For production systems we recommend that you host the library file yourself which you can download from the `dist/` directory in this repository:
* [hookah.js](https://cdn.rawgit.com/muicss/hookahjs/0.0.6/dist/hookah.js)
* [hookah.min.js](https://cdn.rawgit.com/muicss/hookahjs/0.0.6/dist/hookah.min.js)
For tighter integration with your code you can also use the HookahJS NPM package:
```bash
$ npm install --save hookahjs
```
```javascript
var hkjs = require('hookahjs');
document.addEventListener('DOMContentLoaded', function() {
hkjs.init();
});
```
HookahJS can be loaded asynchronously but keep in mind that if HookahJS is initialized after the DOM content has been displayed to the user, there may be a flash of unstyled content. To avoid this you can seed your page with `.hkjs--empty`/`.hkjs--not-empty` classes as necessary.
### How to initialize elements selectively
By default, HookahJS will add event listeners to all current and future input and textarea elements. To prevent this behavior you can listen to the `hkjs-init` event and call the `preventDefault()` method on the event object. You can also use the `hkjs` global object to add hooks to individual elements:
```javascript
window.addEventListener('hkjs-init', function(ev) {
// prevent HookahJS from adding hooks to all and elements
ev.preventDefault();
// use the `hkjs` global object to add hooks to elements manually
var inputEl = document.getElementById('my-input-element');
hkjs.init(inputEl);
});
```
### How to handle programmatic updates
HookahJS can detect all `change` and `input` events triggered by user interactions but it can't detect programmatic changes to control elements. To update the HookahJS CSS classes after making a programmatic change to a control element, you can trigger a `change` or `input` event on the element:
```javascript
// modify element
var inputEl = document.getElementById('my-input-element');
inputEl.value = 'Programmatic input';
// initialize event object (with bubbles = false)
var ev = document.createEvent('HTMLEvents');
ev.initEvent('change', false);
// trigger event
inputEl.dispatchEvent(ev);
```