add "enterClicked" option method

Author: HichemTab-tech

README.md

@@ -234,13 +234,14 @@ $('#otp_target').otpdesigner({
 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.
 ## Options
 
-| **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 | (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. |
 
 ## Methods
 The OTP Designer jQuery Plugin provides the following method:

dist/otpdesigner.js

@@ -578,7 +578,8 @@ const otpdesigner = function (options = {}, ...args) {
                     onlyNumbers: false,
                     inputsClasses: '',
                     inputsParentClasses: '',
-                    typingDone : function () {}
+                    enterClicked: null,
+                    typingDone : null
                 },
                 options
             );
@@ -633,6 +634,14 @@ const otpdesigner = function (options = {}, ...args) {
                     if (event.key === "Backspace") {
                         $inputs[i].value = "";
                         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 {
                         if (event.keyCode > 95 && event.keyCode < 106) {
                             $inputs[i].value = event.key;
@@ -679,15 +688,25 @@ let stringToBool = function (s) {
     return ['true', 'TRUE', '1'].includes(s.toString());
 }
 
-let collectOtpCode = (data) => {
+let collectOtpCode = (data, typingDone = true) => {
     let $inputs = $('#otp_' + data.idSuffix).find('.otp-input');
     let code = '';
     $inputs.each(function (i, e) {
         code += $(e).val().trim();
     });
     $('#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();
+};
 ;// CONCATENATED MODULE: ./index.js