Input Transform

InputTransform is a lightweight JavaScript library that provides various input transformations, such as formatting text, validating file uploads, and converting images to Base64 or WebP format.

Installation

NPM

Install the library using NPM:

npm i input-transform

Import

// CommonJS
const InputTransform = require('input-transform');

// ES Modules
import InputTransform from 'input-transform';

CDN

<script src='https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.umd.js'></script>

You can aslo import the Module format:

<script type="module">
    import InputFormat from "https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.mjs.js";
</script>

Download

Download and include the downloaded file in your project:

<script src="/path/to/input-transform.min.umd.js"></script>

Usage

// Simple example
InputTransform.init('input#username', {
    capitalize: true,
    trim: true,
    maxLength: 20,
})

// Change option
document.getElementById('username').InputTransformOptions.maxLength = 25;

// Initialize image transformations
InputTransform.init('input#image-upload', {
    fileType: 'jpg,png,webp',
    maxImageSize: 500000, // 500 KB
    imageBase64: true // transform the input image to a image in base64 encoded string
});

Using initOne and initAll

Instead of manually defining transformations in JavaScript, you can use HTML data attributes. The initOne method applies transformations based on an element's attributes, while initAll applies them to all inputs on the page.

Example:

<input type="text" id="username" data-input-transform-max-length="25" data-input-transform-trim="true">

InputTransform.initOne('#username');

This will automatically trim spaces and limit the input to 25 characters.

Alternatively, to initialize all matching inputs on the page:

InputTransform.initAll();

This will apply transformations to all elements that have data-input-transform-* attributes.

API

| Method | Description | Parameters | |---------------|-------------|------------| | regex | Applies a regex replacement to the input value. | regex (RegExp), replace (string, optional) | | regexs | Applies multiple regex replacements. | regexs (array of { regex, replace }) | | minNumber | Ensures the number is at least a minimum value. | minNumber (number) | | maxNumber | Ensures the number is at most a maximum value. | maxNumber (number) | | uppercase | Converts the input to uppercase. | None | | lowercase | Converts the input to lowercase. | None | | capitalize | Capitalizes the first letter of the input. | None | | trim | Removes leading and trailing spaces. | None | | clearSpaces | Removes all spaces from the input. | None | | clearNumbers | Removes all numbers from the input. | None | | onlyNumbers | Removes all non-numeric characters. | None | | clearSymbols | Removes all symbols except letters and numbers. | None | | onlySymbols | Removes all letters and numbers, keeping only symbols. | None | | clearLetters | Removes all letters from the input. | None | | onlyLetters | Removes all non-letter characters. | None | | maxLength | Limits the input to a maximum number of characters. | maxLength (number) | | clear | Removes a specific substring. | clear (string) | | clears | Removes multiple substrings. | clears (comma-separated string) | | fileType | Validates allowed file extensions. | fileType (comma-separated string) | | maxImageSize | Restricts file size for uploaded images. | maxImageSize (bytes) | | imageBase64 | Converts uploaded images to Base64. | None | | imageBase64Webp | Converts uploaded images to WebP format. | None |

Initialization Methods

| Method | Description | Parameters | |-------------|-------------|------------| | init | Initializes an input field with specified transformation methods. | input (string or Element), options (object) | | initOne | Automatically initializes a single input using data attributes. | input (string or Element) | | initAll | Automatically initializes all inputs on the page that have transformation data attributes. | None |

Events

InputTransform emits custom events that you can listen to:

| Event Name | Description | |-----------|-------------| | input-transform.init | Triggered when an input transformation is initialized. | | input-transform.error | Triggered when an error occurs (e.g., invalid file type or size). | | input-transform.change | Triggered when the input value is transformed. |

Example:

document.getElementById('username').addEventListener('input-transform.change', event => {
    console.log('Transformed value:', event.detail.value);
});

window.addEventListener('input-transform.error', event => {
    console.error('Error:', event.detail.message);
})

License

MIT