Change variable value on input key press on Blazor

user_9119186 0
Viewed 20353

What I want to do is update the variable value when the user press a key, but it only update the value on blur of the input.

The following code is not working.

<p>@increment</p>
<input 
    type="text"
    @onchange="@((ChangeEventArgs e) =>
        increment = e.Value.ToString())"
/>

@code {
    string increment;
}

Using @bind and @bind-value also doesn't work.

I made a blazorfiddle with the example.

Who can I make the value of my variable to change when the a key is pressed?

blazor asp.net-core c#
4 Answers

Answer:

Quoting Data Binding docs:

<input @bind="CurrentValue" 
       @bind:event="oninput" />

Unlike onchange, which fires when the element loses focus, oninput fires when the value of the text box changes.

Using @oninput:

You can achieve it without @bind directive:

<input value="@CurrentValue"
       @oninput="(e)=> CurrentValue = e.Value.ToString()"/>

InputText & oninput

For people looking for oninput on InputText component the answer is full documented on InputText based on the input event doc:

Use the InputText component to create a custom component that uses the input event instead of the change event. Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" class="@CssClass" 
    @bind="CurrentValueAsString" @bind:event="oninput" />

The CustomInputText component can be used anywhere InputText is used:

<CustomInputText @bind-Value="exampleModel.Name" />
user_8429350

In case anyone wants to do this with the InputText form component provided create your own component file, eg InputTextOnInput.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" class="@CssClass" 
   @bind="CurrentValueAsString" @bind:event="oninput" />

Then use it in your form like so:

<InputTextOnInput @bind-Value="@PropertyToUpdate " />

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

More details on the Blazor docs

user_8947920

In .NET 5 Blazor, @oninput seems to work fine directly on InputText:

<InputText @oninput="(e) => StringProp = e.Value.ToString()"></InputText>

So, thankfully, enabling the Submit button on forms right when they become touched is also possible without custom components. E.g.:

<InputText @oninput="() => untouched = false"></InputText>
...
<button type="submit" disabled="@untouched">Submit</button>
user_29063850

Following the recommendations from this thread, I used both oninput and onchange, and got my textbox to work even inside a table where each record is represented as r. It goes like this:

<td><input type="number" value="@r.SequenceNbr" @oninput="(e) => NewSeqNbr = e.Value.ToString()" @onchange="() => ChangeSeqNbr(r.Id)" ></td>

And in the code, I have:

     public string NewSeqNbr { get; set; }


private async Task ChangeSeqNbr(int recId)
    {
        .....
        // NewSeqNbr is available here 
        .....
    }
user_11718420
Related