CODEWITHSUNDEEP
c#asp.netblazor
stovroz
stovroz

Reputation: 7065

How can you read the current value of an input in an onkeypress method in Blazor?

I have:

<input onkeypress="@Foo" />

and: 

@functions
{
    void Foo(UIKeyboardEventArgs e)
    {

    }
}

How do I pass, or otherwise retrieve, the value of the input in the handler method?

Upvotes: 27

Views: 46302

Answers (9)

hafootnd
hafootnd

Reputation: 118

I am using .NET 6 with Blazor Server and this is what worked with the updates Blazor has made since the original date of this question

My code gets the text from the input element as the user types and uses it to search my data grid.

<input @oninput="@(SearchDataGrid)" type="text"/>

The SearchDataGrid function looks like so:

private async Task SearchDataGrid(ChangeEventArgs e)
    {
        string? userInput = e.Value?.ToString();

        //Logic to implement search//
        if (DataGrid is null) return;
        await DataGrid.SearchAsync(userInput);
    }

Be sure to include this at the top of your .razor file

@using ChangeEventArgs = Microsoft.AspNetCore.Components.ChangeEventArgs

If you wish to give it some styling, you can utilize the input groups from the Forms section of Bootstrap (link) and it'll look something like this:

Screenshot of styled input element for search purposes

Here's the HTML I used for that:

<div class="input-group">
    <div class="input-group-prepend">
        <div class="input-group-text e-icons e-search"></div>
    </div>
    <input class="form-control" @oninput="@(SearchTreeArea)" type="text"/>
</div>

Additionally, it's worth noting that Microsoft's documentation lays out which class are currently supported in .NET 8 based on the type of event you wish to handle. For more information, you can read up here!

Supported EventArgs

Upvotes: 0

Gjaa
Gjaa

Reputation: 1580

Use oninput event.

<input type="text" @oninput="UpdateText"/>

The text is <label>@Text</label>

@code {
    public string Text { get; set; }
    private void UpdateText(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

Upvotes: 9

Vyacheslav
Vyacheslav

Reputation: 558

Searched for the same thing.

Right answer for Blazor WASM (.NET 5) is:

@code {
   public string OurField { get; set; }
}

<Element @bind-ElementFieldName="OurField" />

Example for TextEdit from Blazorise:

@code {
   private string Login { get; set; }
}

<TextEdit @bind-Text="Login"></TextEdit>

Upvotes: 2

Cristian Florin Zlatea
Cristian Florin Zlatea

Reputation: 1181

Unfortunately, you need oninput event to update the bound variable.

@value
<input type="text" @bind="@value" @oninput="@(ui => { value = (string) ui.Value);})" />

@functions {
    string value;
}

Upvotes: 29

HillPhelmuth
HillPhelmuth

Reputation: 419

If you just want the input to update the bound value in real time, you can use: 

<input @bind-value="foo" @bind-value:event="oninput" />

If you specifically want to associate your event with keyboard event args, then something like this will work:

<input @bind-value="foo" @onkeypress="HandleKeyPress" />
@bar
@code {
    string foo;
    string bar;
    void HandleKeyPress(KeyboardEventArgs args)
    {
        bar = $"You just pressed {args.Key}!";
    }
}

Upvotes: 2

Ali Kianoor
Ali Kianoor

Reputation: 1243

For people searching about this, you can implement this with .net core 3.1 to handle on keypress event on Blazor.

<input value="@stringValue" @oninput="(EventArgs) => {SetValue(EventArgs.Value.ToString()); DoSomethingElse();}"/>

@code {
    string stringValue = "";

    private void SetValue(string Value)
    {
        stringValue = int.Parse(Value);
    }
}

Upvotes: 16

Profuturis
Profuturis

Reputation: 1

For simplicity you can use this code:

<input bind-value-oninput="@stringValue"/>

@functions {
string stringValue;
}

Upvotes: -5

Jesper
Jesper

Reputation: 430

You can use the 'oninput' event instead. This event is called every time the value of the Input-element changes. It takes one parameter which is a UIChangeEventArgs that contains a Value property with the Input-elements current value. E.g.

<input type="text" oninput="@((ui) => { Foo((string)ui.Value);})"/>

@function {
    void Foo(string s)
    {
        //do stuff
    }
}

Upvotes: 5

enet
enet

Reputation: 45626

"KeyboardEvent events just indicate what interaction the user had with a key on the keyboard at a low level". In order to access the text input, you should use the input event or change event instead. In Blazor, right now the input event is wrapped by the change event; that is, your code can access new values only after the input element has lost focus. What you should do, however, is define a property which is bound to the input element and can be accessed in your code for retrieval purposes:

protected string MyInput {get; set;}

<input type="text" bind="@MyInput" />

The above binding is internally based on the change event, not the input event (again, right now it is not possible in Blazor)

Upvotes: 6

Related Questions