Skip to content

Commit 7365dab

Browse files
github-actions[bot]KB BotxristianstefanovTsvetomir-Hr
authored
Merge new-kb-combobox-prevent-numeric-181d85b4175f4c478dd5c94fac11eae0-2898 into production (#2909)
* Added new kb article combobox-prevent-numeric * Update knowledge-base/combobox-prevent-numeric.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update knowledge-base/combobox-prevent-numeric.md Co-authored-by: Tsvetomir Hristov <[email protected]> --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Hristian Stefanov <[email protected]> Co-authored-by: Tsvetomir Hristov <[email protected]>
1 parent bd2f0db commit 7365dab

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

Diff for: knowledge-base/combobox-prevent-numeric.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: How to Restrict Numeric Input in ComboBox
3+
description: Learn how to prevent users from typing numbers in a Telerik UI for Blazor ComboBox.
4+
type: how-to
5+
page_title: How to Prevent Numeric Input in Blazor ComboBox
6+
slug: combobox-kb-prevent-numeric
7+
tags: combobox, blazor, input, numeric
8+
res_type: kb
9+
ticketid: 1682510
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>ComboBox for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
I want to restrict typing numbers in the [`ComboBox`](slug:components/combobox/overview) component.
26+
27+
## Solution
28+
29+
To prevent users from entering numbers in the ComboBox:
30+
31+
1. Wrap the component in an HTML element and use the [`onkeydown` event](https://www.w3schools.com/jsref/event_onkeydown.asp) to capture every keystroke.
32+
2. Implement a JavaScript function that prevents the numbers.
33+
34+
Below is the implementation:
35+
36+
`````RAZOR
37+
<div onkeydown="preventNumbers(event)">
38+
<TelerikComboBox Data="@ComboData"
39+
Value="@ComboValue"
40+
ValueChanged="@( (string newValue) => OnComboValueChanged(newValue) )"
41+
Width="300px">
42+
</TelerikComboBox>
43+
</div>
44+
45+
<script suppress-error="BL9992">
46+
function preventNumbers(event) {
47+
if (event.key >= '0' && event.key <= '9') {
48+
event.preventDefault();
49+
}
50+
}
51+
</script>
52+
53+
@code {
54+
private string? ComboValue { get; set; }
55+
56+
private List<string> ComboData { get; set; } = new List<string> {
57+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
58+
};
59+
60+
private void OnComboValueChanged(string newValue)
61+
{
62+
ComboValue = newValue;
63+
}
64+
}
65+
`````

0 commit comments

Comments
 (0)