New to Telerik UI for Blazor? Download free 30-day trial

Events

This article explains the events available in the Telerik MaskedTextbox for Blazor:

OnChange

The OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus. It does not prevent you from using two-way binding for the Value.

Handle OnChange and use two-way binding for the Value

@TheValue
<br />

<TelerikMaskedTextBox Mask="0000-0000-0000-0000" @bind-Value="@TheValue"
                      OnChange="@OnChangeHandler"
                      Label="Credit Card Number:">
</TelerikMaskedTextBox>

@code{
    string TheValue { get; set; }
    async Task OnChangeHandler(object newVal)
    {
        // the handler receives an object that you may need to cast

        Console.WriteLine($"The user confirmed {newVal as string}");
    }
}

The event is an EventCallback and it can be synchronous (return void), or it can also be asynchronous and return async Task.

The OnChange event is a custom event and does not interfere with bindings, so you can use it together with models and forms.

ValueChanged

The ValueChanged event fires upon every change (for example, keystroke) in the input.

Handle ValueChanged

@TheValue
<br />

<TelerikMaskedTextBox Mask="0000-0000-0000-0000" Value="@TheValue"
                      ValueChanged="@ValueChangedHandler"
                      Label="Credit Card Number:">
</TelerikMaskedTextBox>

@code{
    string TheValue { get; set; }
    void ValueChangedHandler(string newVal)
    {
        TheValue = newVal;

        Console.WriteLine($"The user just entered {newVal}");
    }
}

The event is an EventCallback and it can be synchronous (return void), or it can also be asynchronous and return async Task.

See Also

In this article
Not finding the help you need? Improve this article