Events in ASP.NET MVC OTP Input control

13 Jun 20243 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.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Created("Created").Render()
</div>

<script>
    function Created(args) {
        // Here, you can customize your code.
    }
</script>
public ActionResult Default()
{
    return View();
}

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.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Focus("Focus").Render()
</div>

<script>
    function Focus(args) {
        // Here, you can customize your code.
    }
</script>
public ActionResult Default()
{
    return View();
}

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.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Blur("Blur").Render()
</div>

<script>
    function Blur(args) {
        // Here, you can customize your code.
    }
</script>
public ActionResult Default()
{
    return View();
}

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.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Input("Input").Render()
</div>

<script>
    function Input(args) {
        // Here, you can customize your code.
    }
</script>
public ActionResult Default()
{
    return View();
}

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.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").ValueChanged("ValueChanged").Render()
</div>

<script>
    function ValueChanged(args) {
        // Here, you can customize your code.
    }
</script>
public ActionResult Default()
{
    return View();
}