Change variable value on input key press on Blazor

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


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>

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