otp-designer-jquery
Advanced tools
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 delightf
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.
To use the OTP Designer jQuery Plugin, you need the following dependencies:
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.
You can install OTP-designer-jquery via npm:
npm install otp-designer-jquery
You can also include OTP-designer-jquery directly from a CDN by adding the following script tag to your HTML file:
<script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/OTP-designer-jquery@2.3.0/dist/otpdesigner.min.js"></script>
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
<script src="path/to/otpdesigner.min.js"></script>
To use the OTP Designer jQuery Plugin, follow these steps:
<!-- Option 1: Using attributes -->
<div id="otp_target" data-inputs-classes="some-class text-danger" data-otp-length="4"></div>
<!-- Option 2: Using options as an object -->
<div id="otp_target"></div>
// 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',
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OTP Designer jQuery Plugin - Basic Usage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5 p-3">
<h1 class="h1">OTP Designer jQuery Plugin - Basic Usage</h1>
<div id="otp_target"></div>
<button class="btn btn-primary mt-3" id="ok">OK</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="dist/otpdesigner.js"></script>
<script>
$(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!');
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OTP Designer jQuery Plugin - Customized OTP Input</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5 p-3">
<h1 class="h1">OTP Designer jQuery Plugin - Customized OTP Input</h1>
<div id="otp_target" data-inputs-classes="form-control-lg" data-otp-length="8"></div>
<button class="btn btn-primary mt-3" id="ok">OK</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="dist/otpdesigner.js"></script>
<script>
$(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!');
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OTP Designer jQuery Plugin - Using Options as an Object</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5 p-3">
<h1 class="h1">OTP Designer jQuery Plugin - Using Options as an Object</h1>
<div id="otp_target"></div>
<button class="btn btn-primary mt-3" id="ok">OK</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="dist/otpdesigner.js"></script>
<script>
$(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!');
}
});
});
</script>
</body>
</html>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OTP Designer jQuery Plugin - Using Context Menu Options</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5 p-3">
<h1 class="h1">OTP Designer jQuery Plugin - Using Context Menu Options</h1>
<div id="otp_target"></div>
<button class="btn btn-primary mt-3" id="ok">OK</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="dist/otpdesigner.js"></script>
<script>
$(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!');
}
});
});
</script>
</body>
</html>
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.
| 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. |
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.Here's a Demo example :
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
FAQs
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 delightf
The npm package otp-designer-jquery receives a total of 8 weekly downloads. As such, otp-designer-jquery popularity was classified as not popular.
We found that otp-designer-jquery demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.