How to capture ENTER key on RadzenTextBox

Radzen.Blazor Components
1

My application collects user input in a RadzenTextBox to perform searching. I want the searching to start when ENTER key is pressed.

With "@onkeypress" I was able to capture individual keystrokes on RadzenTextBox, including ENTER, however "@onkeypress" handler does not detect value in either RadzenTextBox.Value property or the bound variable.

What event drives the RadzenTextBox.Value property and bound variable to be assigned? What is the best way to capture ENTER key event and retrieve the input up to ENTER key?

2

It is possible to use onkeypress for both however only in pure JavaScript, not in Blazor (@onkeypress) since Value will be updated on lost focus. Possible solution will be to update Value using @oninput, for example:

<RadzenTextBox @bind-Value=@value @oninput=@(args => value = args.Value.ToString()) 
    @onkeypress=@(args => console.Log($"Value is: {value}")) />
1 Like
3

Yeah that works - use @oninput to update the bound variable and use @onkeypress to detect ENTER key.

4

However, if you type in the textbox very fast, you will see that some chars get lost. This is due to the fact that the regular binding on the value is still running plus your "manual" upating in the oninput event.

I have figured out a different way to capture ENTER on a textbox and then do something with the text afterwards.

Assume you have a RadzenTextBox and a Button that does something with value which is bound to the textbox (SearchTerm). Entering some text and then pressing the button with the mouse works as expected. Now, in order to invoke the button click event when ENTER key is pressed in the textbox, you need to add two attributes to the RadzenTextBox:

id = tbSearchText

and

@onkeypress = (e => SearchInputKeyPressed(e))

In the code-bedhind, you define the following method:

protected async Task SearchInputKeyPressed(KeyboardEventArgs args)
        {
            if (args.Key == "Enter")
            {
                var val = await JSRuntime.InvokeAsync<string>("eval", $@"document.getElementById(""tbSearchText"").value");
                SearchTerm = val;
                await ButtonSearchClick(null);
            }
        }

When ENTER key is pressed, the code uses JavaScript to retrieve the current text value of the textbox and manually assigns it to the SearchTerm property that is bound to the textbox. This is required since the automatic binding will only happen if the textbox loses the focus. Since we press enter, this is not happening, so we must update manually. After that, simply the click handler of the button is called to perform the code that is otherwise executed if the button is clicked with the mouse. Here, we can simply use SearchTerm as usual to get the text from the textbox.

I hope this helps anyone how is looking for a way invoke some code triggered by the press of ENTER in a textbox.

5

have this error.
cannot convert from string' to 'object?

Update.
Error solve after add this line.

@inject IJSRuntime JS;

then
var val = await JS.InvokeAsync("eval", $@"document.getElementById(""tbSearchText"").value");

1 Like