From 19f9f018852069996b8637e41aa90925cbd4eb69 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 4 Apr 2025 12:55:26 +0000 Subject: [PATCH 1/3] Added new kb article combobox-prevent-numeric --- knowledge-base/combobox-prevent-numeric.md | 65 ++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 knowledge-base/combobox-prevent-numeric.md diff --git a/knowledge-base/combobox-prevent-numeric.md b/knowledge-base/combobox-prevent-numeric.md new file mode 100644 index 000000000..82dc033d7 --- /dev/null +++ b/knowledge-base/combobox-prevent-numeric.md @@ -0,0 +1,65 @@ +--- +title: How to Restrict Numeric Input in ComboBox +description: Learn how to prevent users from typing numbers in a Telerik UI for Blazor ComboBox. +type: how-to +page_title: How to Prevent Numeric Input in Blazor ComboBox +slug: combobox-kb-prevent-numeric +tags: combobox, blazor, input, numeric +res_type: kb +ticketid: 1682510 +--- + +## Environment + + + + + + + + +
ProductComboBox for Blazor
+ +## Description + +I want to restrict typing numbers in the [`ComboBox`](slug:components/combobox/overview) 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: + +`````Razor +
+ + +
+ + + +@code { + private string? ComboValue { get; set; } + + private List ComboData { get; set; } = new List { + "Manager", "Developer", "QA", "Technical Writer", "Support Engineer" + }; + + private void OnComboValueChanged(string newValue) + { + ComboValue = newValue; + } +} +````` From d887842b2116089332f28c5abf8e49210563f0b2 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:50:36 +0300 Subject: [PATCH 2/3] Update knowledge-base/combobox-prevent-numeric.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/combobox-prevent-numeric.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/combobox-prevent-numeric.md b/knowledge-base/combobox-prevent-numeric.md index 82dc033d7..ad5aa7149 100644 --- a/knowledge-base/combobox-prevent-numeric.md +++ b/knowledge-base/combobox-prevent-numeric.md @@ -28,7 +28,7 @@ I want to restrict typing numbers in the [`ComboBox`](slug:components/combobox/o 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. +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. 2. Implement a JavaScript function that prevents the numbers. Below is the implementation: From ddfd5b6125b7f258d75c6f9648cb7023ffc2e219 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:50:42 +0300 Subject: [PATCH 3/3] Update knowledge-base/combobox-prevent-numeric.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/combobox-prevent-numeric.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/combobox-prevent-numeric.md b/knowledge-base/combobox-prevent-numeric.md index ad5aa7149..63be9ff72 100644 --- a/knowledge-base/combobox-prevent-numeric.md +++ b/knowledge-base/combobox-prevent-numeric.md @@ -33,7 +33,7 @@ To prevent users from entering numbers in the ComboBox: Below is the implementation: -`````Razor +`````RAZOR