{"id":20161190,"url":"https://github.com/kubetail-org/hookahjs","last_synced_at":"2025-04-10T00:12:59.211Z","repository":{"id":48031842,"uuid":"103495648","full_name":"kubetail-org/hookahjs","owner":"kubetail-org","description":"Add empty/dirty/touched CSS hooks to input and textarea elements automatically (1056 bytes)","archived":false,"fork":false,"pushed_at":"2023-04-19T03:55:57.000Z","size":385,"stargazers_count":20,"open_issues_count":5,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T00:12:48.379Z","etag":null,"topics":["css","css-hooks","forms","input","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kubetail-org.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.txt","dei":null},"funding":{"github":"amorey"}},"created_at":"2017-09-14T06:40:18.000Z","updated_at":"2024-02-13T07:08:33.000Z","dependencies_parsed_at":"2024-04-08T04:57:33.936Z","dependency_job_id":null,"html_url":"https://github.com/kubetail-org/hookahjs","commit_stats":null,"previous_names":["muicss/hookahjs"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubetail-org%2Fhookahjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubetail-org%2Fhookahjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubetail-org%2Fhookahjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kubetail-org%2Fhookahjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kubetail-org","download_url":"https://codeload.github.com/kubetail-org/hookahjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131315,"owners_count":21052819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-hooks","forms","input","javascript"],"created_at":"2024-11-14T00:17:50.786Z","updated_at":"2025-04-10T00:12:59.177Z","avatar_url":"https://github.com/kubetail-org.png","language":"JavaScript","funding_links":["https://github.com/sponsors/amorey"],"categories":[],"sub_categories":[],"readme":"# HookahJS\n\n\u003cimg src=\"https://www.muicss.com/static/images/hookahjs.svg?1\" width=\"250px\"\u003e\n\nHookahJS 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.\n\n## Introduction\n\nHookahJS 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:\n\n  * `hkjs--empty` - control element is empty\n  * `hkjs--not-empty` - control element is not empty\n  * `hkjs--pristine` - control element has not seen an `input` or `change` event\n  * `hkjs--dirty` - control element has seen an `input` or `change` event\n  * `hkjs--untouched` - control element has not seen a `blur` event\n  * `hkjs--touched` - control element has seen a `blur` event\n\nHookahJS 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).\n\n## Quickstart\n\nTo 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:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"//cdn.rawgit.com/muicss/hookahjs/0.0.6/dist/hookah.min.js\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n      .hkjs--touched:not(:valid) {\n        border: 1px solid red;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cinput type=\"text\" required\u003e\n    \u003cinput type=\"email\" required\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n[View Demo \u0026raquo;](https://jsfiddle.net/muicss/y4eat0hu/)\n\nHookahJS 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.\n\n## Browser Support\n\n * IE10+\n * Opera 12+\n * Safari 5+\n * Chrome\n * Firefox\n * iOS 6+\n * Android 4.4+\n\nNote: HookahJS uses CSS @keyframes to detect new DOM elements automatically. To use HookahJS in IE9 you can initialize DOM elements explicitly with `hkjs.init()`.\n\n## Documentation\n\n### How to load HookahJS\n\nFor production systems we recommend that you host the library file yourself which you can download from the `dist/` directory in this repository:\n\n * [hookah.js](https://cdn.rawgit.com/muicss/hookahjs/0.0.6/dist/hookah.js)\n * [hookah.min.js](https://cdn.rawgit.com/muicss/hookahjs/0.0.6/dist/hookah.min.js)\n\nFor tighter integration with your code you can also use the HookahJS NPM package: \n\n```bash\n$ npm install --save hookahjs\n```\n\n```javascript\nvar hkjs = require('hookahjs');\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  hkjs.init();\n});\n```\n\nHookahJS 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.\n\n### How to initialize elements selectively\n\nBy 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:\n\n```javascript\nwindow.addEventListener('hkjs-init', function(ev) {\n  // prevent HookahJS from adding hooks to all \u003cinput\u003e and \u003ctextarea\u003e elements\n  ev.preventDefault();\n\n  // use the `hkjs` global object to add hooks to elements manually\n  var inputEl = document.getElementById('my-input-element');\n  hkjs.init(inputEl);\n});\n```\n\n### How to handle programmatic updates\n\nHookahJS 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:\n\n```javascript\n// modify element\nvar inputEl = document.getElementById('my-input-element');\ninputEl.value = 'Programmatic input';\n\n// initialize event object (with bubbles = false)\nvar ev = document.createEvent('HTMLEvents');\nev.initEvent('change', false);\n\n// trigger event\ninputEl.dispatchEvent(ev);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubetail-org%2Fhookahjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkubetail-org%2Fhookahjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubetail-org%2Fhookahjs/lists"}