otp-designer-jquery - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "otp-designer-jquery",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "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.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -56,3 +56,3 @@ # OTP Designer jQuery Plugin
 ```HTML
-    <script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/OTP-designer-jquery@1.0.0/dist/otpdesigner.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/OTP-designer-jquery@1.0.1/dist/otpdesigner.min.js"></script>
 ```
@@ -73,3 +73,3 @@
 <!-- Option 1: Using attributes -->
-<div id="otp_target" data-input-classes="some-class text-danger" data-otp-length="4"></div>
+<div id="otp_target" data-inputs-classes="some-class text-danger" data-otp-length="4"></div>
 
@@ -97,3 +97,3 @@ <!-- Option 2: Using options as an object -->
   onlyNumbers: false,
-  inputClasses: 'some-class text-danger',
+  inputsClasses: 'some-class text-danger',
 });
@@ -164,3 +164,3 @@
       <h1 class="h1">OTP Designer jQuery Plugin - Customized OTP Input</h1>
-      <div id="otp_target" data-input-classes="form-control-lg" data-otp-length="8"></div>
+      <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>
@@ -222,3 +222,3 @@ </div>
         onlyNumbers: false,
-        inputClasses: 'some-class text-danger',
+        inputsClasses: 'some-class text-danger',
       });
@@ -242,9 +242,10 @@
 
-| **Option**                | **Type** | **Default**  | **Description**                                                                  |
-|---------------------------|----------|--------------|----------------------------------------------------------------------------------|
-| **`length`**              | Integer  | 6            | The number of OTP input fields.                                                  |
-| **`onluNumbers`**         | Boolean  | false        | Allow only numeric input.                                                        |
-| **`inputClasses`**        | 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 | (code) => {} | A callback function executed when the user completes typing the OTP.             |
+| **Option**                | **Type** | **Default** | **Description**                                                                      |
+|---------------------------|----------|-------------|--------------------------------------------------------------------------------------|
+| **`length`**              | Integer  | 6           | The number of OTP input fields.                                                      |
+| **`onluNumbers`**         | 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. |
 
@@ -260,2 +261,6 @@ ## Methods
 
+- **`set`**: Set a value to the current OTP code.
+- **`focus`**: Request a focus on the OTP code input.
+- **`hiddenInput`**: Return the hidden input element which stores the OTP code value.
+
 ## Demo
@@ -262,0 +267,0 @@

src/otpdesigner.js

@@ -9,3 +9,2 @@ export const otpdesigner = function (options = {}, ...args) {
         code: function (results, data) {
-            console.log(data);
             let code = $('#otp_hidden_' + data.idSuffix).val();
@@ -19,2 +18,22 @@ if (isDefined(code)) code = code.trim();
             return results;
+        },
+        set: function (results, data, args) {
+            let code = args[0];
+            if (isDefined(code)) code = code.trim();
+            else code = "";
+            if (code.length === data.settings.length) {
+                for (let i = 0; i < code.length; i++) {
+                    $('#'+optInputId + (i) + "_" + data.idSuffix).val(code[i]);
+                }
+                collectOtpCode(data);
+            }
+            return results;
+        },
+        focus: function (results, data) {
+            $('#'+optInputId + (data.settings.length - 1) + "_" + data.idSuffix).focus();
+            return results;
+        },
+        hiddenInput: function (results, data) {
+            results.push($('#otp_hidden_' + data.idSuffix));
+            return results;
         }
@@ -31,5 +50,6 @@ };
                     onlyNumbers: false,
-                    inputClasses: '',
+                    inputsClasses: '',
                     inputsParentClasses: '',
-                    typingDone : function () {}
+                    enterClicked: null,
+                    typingDone : null
                 },
@@ -45,4 +65,4 @@ options
             }
-            if (isDefined($(this).attr('data-input-classes'))) {
-                settings.inputClasses = $(this).attr('data-input-classes');
+            if (isDefined($(this).attr('data-inputs-classes'))) {
+                settings.inputsClasses = $(this).attr('data-inputs-classes');
             }
@@ -68,2 +88,3 @@ if (isDefined($(this).attr('data-inputs-parent-classes'))) {
             $hiddenInput.attr('id', 'otp_hidden_' + idSuffix);
+            $hiddenInput.attr('name', 'otp_hidden_' + idSuffix);
             $hiddenInput.appendTo($parent);
@@ -78,4 +99,4 @@
                 }
-                if (settings.inputClasses !== "") {
-                    $input.addClass(settings.inputClasses);
+                if (settings.inputsClasses !== "") {
+                    $input.addClass(settings.inputsClasses);
                 }
@@ -91,2 +112,10 @@ $input.appendTo($inputsParent);
                         if (i !== 0) $inputs[i - 1].focus();
+                    } else if (event.key === "Enter" && i === $inputs.length - 1 && $inputs[i].value !== "") {
+                        event.preventDefault();
+                        collectOtpCode(data, false);
+                        if (settings.enterClicked != null) {
+                            settings.enterClicked();
+                        }
+                        loseFocus(data);
+                        return;
                     } else {
@@ -122,3 +151,3 @@ if (event.keyCode > 95 && event.keyCode < 106) {
         else{
-            if ( typeof options == 'string') {
+            if (typeof options === 'string' && typeof methods[options] !== 'undefined') {
                 results = methods[options](results, data, [...args]);
@@ -128,3 +157,3 @@ }
     });
-    return results.length > 1 ? results : results[0];
+    return results.length > 1 ? results : (results.length === 0 ? null : results[0]);
 }
@@ -140,3 +169,3 @@
 
-let collectOtpCode = (data) => {
+let collectOtpCode = (data, typingDone = true) => {
     let $inputs = $('#otp_' + data.idSuffix).find('.otp-input');
@@ -148,3 +177,13 @@ let code = '';
     $('#otp_hidden_' + data.idSuffix).val(code);
-    if (code.length === $inputs.length) data.settings.typingDone(code);
-}
+    if (code.length === $inputs.length && typingDone) {
+        if (data.settings.typingDone != null) {
+            data.settings.typingDone(code);
+        }
+        loseFocus(data);
+    }
+}
+
+let loseFocus = (data) => {
+    if (data.settings.enterClicked != null) return;
+    $('.otp-input:focus').blur();
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23557

increased by9.08%

Lines of code

242

increased by18.63%

Number of lines in readme file

278

increased by1.83%

No dependency changes