https://github.com/lullaby6/input-transform
NPM Package - Transform and format input values
https://github.com/lullaby6/input-transform
html html-input input js js-lib js-library npm npm-package
Last synced: 10 months ago
JSON representation
NPM Package - Transform and format input values
- Host: GitHub
- URL: https://github.com/lullaby6/input-transform
- Owner: lullaby6
- License: mit
- Created: 2025-01-08T04:10:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-03T15:59:52.000Z (11 months ago)
- Last Synced: 2025-04-12T13:15:33.361Z (10 months ago)
- Topics: html, html-input, input, js, js-lib, js-library, npm, npm-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/input-transform
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
npm i input-transform
```
### Import
```js
// CommonJS
const InputTransform = require('input-transform');
// ES Modules
import InputTransform from 'input-transform';
```
### CDN
```html
```
You can aslo import the Module format:
```html
import InputFormat from "https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.mjs.js";
```
### Download
Download and include the downloaded file in your project:
```html
```
## Usage
```js
// 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:
```html
```
```js
InputTransform.initOne('#username');
```
This will automatically trim spaces and limit the input to 25 characters.
Alternatively, to initialize all matching inputs on the page:
```js
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:
```js
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