Change variable value on input key press on Blazor

Question

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?

Answer 1

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" />

Answer 2

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