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 required files:
<script src="html-enhance.js" async defer></script>
<script src="html-enhance-ajax.js" async defer></script>Add confirmation dialogs to form submissions using the data-confirm or
data-formconfirm attributes.
<form data-confirm="Are you sure you want to submit this form?">
<!-- Form content -->
<button data-formconfirm="Are you sure you want to press this button?">
</form><form >Warn users about unsaved form changes with the data-warn-unsaved attribute.
<form data-warn-unsaved>
<!-- Form content -->
</form>Add share buttons with the data-share attribute.
<button type="button" data-share>Share</button>Add copy buttons with the data-copy attribute.
<input type="text" id="text">
<button type="button" data-copy="text">Copy</button>Preview images for file inputs using the data-preview-for attribute.
<input type="file" id="upload">
<img data-preview-for="upload">Show the remaining character count for controls with the
data-chars-remaining-for attribute.
<textarea id="message" maxlength="100"></textarea>
<span data-chars-remaining-for="message"></span>Automatically resize textareas based on their content using the
data-auto-resize attribute.
<textarea data-auto-resize></textarea>Enable smooth scrolling for anchor links (links starting with #) automatically.
<a href="#section">Go to section</a>
<div id="section">Content</div>Automatically set the aria-invalid attribute to false when an input changes.
<input type="text" aria-invalid="true">Allow for form submissions and link navigation with AJAX using the
data-ajax-replace attribute.
<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.