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 anywhereInputText
is used:
<CustomInputText @bind-Value="exampleModel.Name" />