How to Restrict Numeric Input in ComboBox

Updated over 6 months ago

Environment

Product

ComboBox for Blazor

Description

I want to restrict typing numbers in the ComboBox component.

Solution

To prevent users from entering numbers in the ComboBox:

1. Wrap the component in an HTML element and use the onkeydown event to capture every keystroke.
2. Implement a JavaScript function that prevents the numbers.

Below is the implementation:

<div onkeydown="preventNumbers(event)">
    <TelerikComboBox Data="@ComboData"
                     Value="@ComboValue"
                     ValueChanged="@( (string newValue) => OnComboValueChanged(newValue) )"
                     Width="300px">
    </TelerikComboBox>
</div>

<script suppress-error="BL9992">
    function preventNumbers(event) {
        if (event.key >= '0' && event.key <= '9') {
            event.preventDefault();
        }
    }
</script>

@code {
    private string? ComboValue { get; set; }

    private List<string> ComboData { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
    };

    private void OnComboValueChanged(string newValue)
    {
        ComboValue = newValue;
    }
}