Events

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

• OnChange
• ValueChanged
• OnBlur

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">
</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. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

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">
</TelerikMaskedTextBox>

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

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

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

OnBlur

The OnBlur event fires when the component loses focus.

Handle the OnBlur event

@* You do not have to use OnChange to react to loss of focus *@

<TelerikMaskedTextBox @bind-Value="@TheValue" Mask="0000-0000-0000-0000"
                     OnBlur="@OnBlurHandler">
</TelerikMaskedTextBox>

@code{
    async Task OnBlurHandler()
    {
        Console.WriteLine($"BLUR fired, current value is {TheValue}.");
    }

    string TheValue { get; set; }
}

See Also

• ValueChanged and Validation
• Fire OnChange Only Once