New to Telerik UI for Blazor? Start a free 30-day trial
How to Restrict Numeric Input in ComboBox
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:
- Wrap the component in an HTML element and use the
onkeydown
event to capture every keystroke. - 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;
}
}