From e34690d86eb0bbc915b8461aa1e58612fab266b5 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 4fe11b3b75cb4bdd4f66f65d8263cb24d4055b5d 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 e23b0c7a80a8601777dc951d50112ab3b88f60fb 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