Prevent Keypress Enter on NumericTextBox

[Nuno]

Hello, i have a NumericTextBox inside a EditForm, how do i prevent/block  a NumericTextBox from pressing enter and cancel the remaing events?

Thanks

[Kokila Poovendran]

Hi Nuno,

We have addressed your concern, and we've prepared a sample code snippet to demonstrate how you can achieve this functionality. Please refer to the code snippet provided below:

Code snippet:

<SfNumericTextBox TValue="int?" Placeholder="Enter an age between 1 to 80" Min="@SetMin" @bind-Value="@annotation.Age" ID="numeric">

             <NumericTextBoxEvents TValue="int?" Created="@ComponentCreated"></NumericTextBoxEvents></SfNumericTextBox>

@code {

 

    async Task ComponentCreated()

    {

        await JsRuntime.InvokeVoidAsync("onCreated", "numeric");

    }

}

 

[RestrickKeyBoard.js]

 

window.onCreated = (id) => {

    var element = document.getElementById(id);

element.parentElement.addEventListener("keydown", function (args) {

        if (args.key == "Enter") {

            args.preventDefault();

            args.stopImmediatePropagation();

            args.stopPropagation();

        }

}, true)

}

We kindly request you to refer to the provided code snippet, and it should meet your requirements for preventing the "Enter" keypress event on the NumericTextBox.

If you have any further questions or need additional assistance, please let us know.

Regards,

Kokila Poovendran.

Attachment: BlazorApp1_32ec0425.zip

[Nuno]

It Works! :) Thanks