Events in EJ2 JavaScript OTP Input control

14 Jun 202413 minutes to read

This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input control.

created

The OTP Input control triggers the created event when the control rendering is completed.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    created: function() {
        //your required action here 
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

focus

The OTP Input control triggers the focus event when the OTP Input is focused. The OtpFocusEventArgs passed as an event argument provides the details of the focus event.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    focus: function() {
        //your required action here 
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

blur

The OTP Input control triggers the blur event when the OTP Input is focused out. The OtpFocusEventArgs passed as an event argument provides the details of the blur event.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    blur: function() {
        //your required action here 
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

input

The OTP Input control triggers the input event when the value of each OTP Input is changed. The OtpInputEventArgs passed as an event argument provides the details of the each value is changed.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    input: function() {
        //your required action here 
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

valueChanged

The OTP Input control triggers the valueChanged event when the value of the OTP Input is changed and matching the OTP Input length. The OtpChangedEventArgs passed as an event argument provides the details when value is changed.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    valueChanged: function() {
        //your required action here 
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Below example demonstrates the valueChanged event of the OTP Input control.

// Initializes the OTP Input control
var otpInput = new ej.inputs.OtpInput({
    valueChanged: (args) => {
        alert("Entered OTP value: " + args.value);
    }
});

// Render initialized OTP Input.
otpInput.appendTo('#otp_default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - OTP Input</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="width: 350px;">
        <div id="otp_default"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>