Prevent Mouse Wheel and Non-Numeric Characters in NumericTextBox

Environment

Product Version	10.1.0
Product	Progress® KendoReact NumericTextBox

Description

This article explains how to prevent the mouse wheel from changing the value within a NumericTextBox component. It also provides a solution to restrict the input of non-numeric characters, allowing only numeric values and the decimal separator.

Solution

To prevent the mouse wheel from changing the value and restrict non-numeric characters, you can add event listeners for the wheel and keydown events of the input element of the NumericTextBox. Within these event listeners, conditionally stop the propagation of the events.

Here's an example demonstrating this approach:

Change Theme

Theme

Loading ...