A lightweight JavaScript library that provides progressive enhancements for HTML forms and user interactions. This library adds functionality while maintaining zero dependencies and graceful degradation.
Include the library in your HTML file:
<script src="enhance.js" async defer></script>For graceful degradation for users with JavaScript disabled, copy
noscript.html into the <head> section of your HTML file.
Add confirmation dialogs to forms or form submission buttons:
<form data-confirm="Are you sure?">
<!-- Form content -->
<button data-formconfirm="Are you sure?">Submit</button>
</form>Warn users about unsaved changes in forms:
<form data-unsaved-changes-warning>
<!-- Form content -->
</form>Add share functionality:
<button type="button" data-share>Share</button>Add copy-to-clipboard functionality:
<input type="text" id="text">
<button type="button" data-copy="text">Copy</button>Preview images for file inputs:
<input type="file" id="upload">
<img data-preview-for="upload">Display the remaining character count for text inputs:
<textarea id="message" maxlength="100"></textarea>
<span data-chars-remaining-for="message"></span>Automatically adjust textarea height based on content:
<textarea data-auto-resize></textarea>Automatic smooth scrolling to anchor links:
<a href="#section">Go to section</a>
<div id="section">Content</div>Automatically reset aria-invalid attributes:
<input type="text" aria-invalid="true">Add file drag-and-drop functionality:
<label data-drop-zone>
<input type="file">
</label>Use AJAX for form submissions and link navigation:
<div id="page">
<a href="." data-ajax-replace="page">Refresh page</a>
</div>All features are implemented as progressive enhancements, meaning the basic functionality will work even if JavaScript is disabled.
This project is licensed under the MIT License.