Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hichemtab-tech/otp-designer-jquery
OTP-designer-jquery: Create custom OTP code inputs effortlessly! This jQuery plugin enables designers and developers to design visually appealing, secure OTP code input fields. Enjoy seamless integration and built-in validation events, ensuring a delightful user experience. Simplify OTP input implementation with ease.
https://github.com/hichemtab-tech/otp-designer-jquery
bootstrap-input bootstrap-otp custom-inputs custom-one-time-password-input jquery jquery-plugin jqueryui one-time-password-inputs otp-inputs otp-ui otp-view userfriendly-otp-input
Last synced: about 2 months ago
JSON representation
OTP-designer-jquery: Create custom OTP code inputs effortlessly! This jQuery plugin enables designers and developers to design visually appealing, secure OTP code input fields. Enjoy seamless integration and built-in validation events, ensuring a delightful user experience. Simplify OTP input implementation with ease.
- Host: GitHub
- URL: https://github.com/hichemtab-tech/otp-designer-jquery
- Owner: HichemTab-tech
- License: mit
- Created: 2023-07-21T15:29:46.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-21T19:20:23.000Z (4 months ago)
- Last Synced: 2024-10-01T09:39:54.441Z (3 months ago)
- Topics: bootstrap-input, bootstrap-otp, custom-inputs, custom-one-time-password-input, jquery, jquery-plugin, jqueryui, one-time-password-inputs, otp-inputs, otp-ui, otp-view, userfriendly-otp-input
- Language: JavaScript
- Homepage: https://hichemtab-tech.github.io/OTP-designer-jquery/
- Size: 178 KB
- Stars: 8
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# OTP Designer jQuery Plugin
## Overview
**OTP-designer-jquery** is a user-friendly jQuery plugin that enables you to create an easy-to-use One-Time Password (OTP) input system in your web applications. The plugin allows users to enter OTP codes with convenience and provides customizable options to adapt the OTP input to your design.
## Table of Contents
- [Requirements](#requirements)
- [Features](#features)
- [Installation](#installation)
- [npm](#npm)
- [CDN](#cdn)
- [Local Download](#local-download)
- [Usage](#usage)
- [Examples](#examples)
- [Example 1: Basic Usage](#example-1-basic-usage)
- [Example 2: Customized OTP Input](#example-2-customized-otp-input)
- [Example 3: Using Options as an Object](#example-3-using-options-as-an-object)
- [Options](#options)
- [Methods](#methods)
- [Demo](#demo)
- [Contributing](#contributing)
- [Author](#author)
- [License](#license)
## Features
- Simple and intuitive OTP input system.
- Customize the number of OTP input fields.
- Allow only numeric input or alphanumeric input (configurable).
- Easily integrate with your existing jQuery projects.
- Minimal and lightweight design.
## Requirements
To use the OTP Designer jQuery Plugin, you need the following dependencies:
- jQuery (minimum version 3.7.0)
You can include these dependencies in your HTML file via CDN or by downloading the files locally.
## Installation
To use the OTP Designer jQuery Plugin in your project, you can include the necessary files via npm, CDN or by downloading the files locally.
### npm
You can install OTP-designer-jquery via npm:
```bash
npm install otp-designer-jquery
```
### CDN
You can also include OTP-designer-jquery directly from a CDN by adding the following script tag to your HTML file:
```HTML
```
### Local Download
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
```HTML
```
## Usage
To use the OTP Designer jQuery Plugin, follow these steps:
- Include the necessary scripts and stylesheets as described in the installation section.
- Create a target element in your HTML to initialize the OTP designer. You can use either options as an object or attributes to customize the OTP designer:
```HTML
```
- Initialize the OTP designer on the target element using jQuery:
```javascript
// Option 1: Using attributes
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
});
// Option 2: Using options as an object
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
length: 4,
onlyNumbers: false,
inputsClasses: 'some-class text-danger',
});
```
- Customize the options as needed.
## Examples
### Example 1: Basic Usage
```HTML
OTP Designer jQuery Plugin - Basic Usage
OTP Designer jQuery Plugin - Basic Usage
OK
$(document).ready(function() {
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
});
$('#ok').on('click', function () {
let result = $('#otp_target').otpdesigner('code');
if (result.done) {
alert('Entered OTP code: ' + result.code);
} else {
alert('Typing incomplete!');
}
});
});
```
### Example 2: Customized OTP Input
```HTML
OTP Designer jQuery Plugin - Customized OTP Input
OTP Designer jQuery Plugin - Customized OTP Input
OK
$(document).ready(function() {
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
});
$('#ok').on('click', function () {
let result = $('#otp_target').otpdesigner('code');
if (result.done) {
alert('Entered OTP code: ' + result.code);
} else {
alert('Typing incomplete!');
}
});
});
```
### Example 3: Using Options as an Object
```HTML
OTP Designer jQuery Plugin - Using Options as an Object
OTP Designer jQuery Plugin - Using Options as an Object
OK
$(document).ready(function() {
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
length: 4,
onlyNumbers: false,
inputsClasses: 'some-class text-danger',
});
$('#ok').on('click', function () {
let result = $('#otp_target').otpdesigner('code');
if (result.done) {
alert('Entered OTP code: ' + result.code);
} else {
alert('Typing incomplete!');
}
});
});
```
In these examples, the OTP designer is initialized inside the otp_target element with different configurations. The first example demonstrates the basic usage without custom options, while the second example shows a customized OTP input with larger input fields and a length of 8 digits. The third example demonstrates using options as an object to customize the OTP input.
### Example 4: Using Context Menu Options
```HTML
OTP Designer jQuery Plugin - Using Context Menu Options
OTP Designer jQuery Plugin - Using Context Menu Options
OK
$(document).ready(function() {
$('#otp_target').otpdesigner({
typingDone: function (code) {
console.log('Entered OTP code: ' + code);
},
contextMenuElement: $('<div class="dropdown-menu" id="contextMenu" style="display: none; position: fixed;">\n' +
' <a class="dropdown-item paste-action">Paste</a>\n' +
'</div>'),
openContextMenuElement: function (e) {
let $contextMenu = $('#contextMenu');
$contextMenu.css({
display: 'block',
left: e.pageX,
top: e.pageY
});
$('body').append($contextMenu);
},
closeContextMenuElement: function () {
$('#contextMenu').hide();
}
});
$('#ok').on('click', function () {
let result = $('#otp_target').otpdesigner('code');
if (result.done) {
alert('Entered OTP code: ' + result.code);
} else {
alert('Typing incomplete!');
}
});
});
```
In this example, the context menu includes a "Paste" action,
and the element that triggers the paste action has the class `.paste-action`.
Functions to handle opening and closing the context menu are provided.
## Options
| **Option** | **Type** | **Default** | **Description** |
|-------------------------------|----------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| **`length`** | Integer | 6 | The number of OTP input fields. |
| **`onlyNumbers`** | Boolean | false | Allow only numeric input. |
| **`inputsClasses`** | String | "" | Additional CSS classes to apply to the OTP input fields. |
| **`inputsParentClasses`** | String | "" | Additional CSS classes to apply to the parent container of the OTP input fields. |
| **`typingDone`** | Function | null | A callback function executed when the user completes typing the OTP. |
| **`enterClicked`** | Function | null | A callback function executed when the user click on Enter key when he's done typing. |
| **`onchange`** | Function | null | A callback function executed when the OTP code changed (by typing, clearing, setting). |
| **`contextMenuElement`** | jQuery | null | A jQuery element used as the context menu for the OTP input fields. The element that triggers the paste action should have the class `paste-action`. |
| **`openContextMenuElement`** | Function | null | A function to handle opening the context menu. |
| **`closeContextMenuElement`** | Function | null | A function to handle closing the context menu. |
## Methods
The OTP Designer jQuery Plugin provides the following method:
- **`code`**: Get the current OTP code entered by the user. Returns an object with properties:
| **Property** | **Type** | **Description** |
|--------------|----------|---------------------------------------------------------|
| **`done`** | Boolean | A boolean indicating if the OTP code entry is complete. |
| **`code`** | String | The entered OTP code. |
- **`set`**: Set a value to the current OTP code.
- **`clear`**: Clear the value of the current OTP code.
- **`focus`**: Request a focus on the OTP code input.
- **`option`**: Get or set an option dynamically.
- **`addClass`**: Add style classes to the fake otp inputs `classList`.
- **`removeClass`**: Remove style classes from the fake otp inputs `classList`.
- **`hiddenInput`**: Return the hidden input element which stores the OTP code value.
## Demo
Here's a Demo example :
[Demo](https://hichemtab-tech.github.io/OTP-designer-jquery)
## Contributing
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please [open an issue](https://github.com/HichemTab-tech/OTP-designer-jquery/issues) or [submit a pull request](https://github.com/HichemTab-tech/OTP-designer-jquery/pulls).
## Author
- [@HichemTab-tech](https://www.github.com/HichemTab-tech)
## License
[MIT](https://github.com/HichemTab-tech/OTP-designer-jquery/blob/master/LICENSE)