How to make an EditForm Input that binds using oninput rather than onchange

Question

Suppose I want to use an EditForm, but I want the value binding to trigger every time the user types into the control instead of just on blur. Suppose, for the sake of an ex

Answer 1

Inheriting from a component and changing it so that it responds to the input event is now covered in the official documentation for .NET Core 3.1:

InputText based on the input event

Use the InputText component to create a custom component that uses the input event instead of the change event.

Create a component with the following markup, and use the component just as InputText is used:

razor:

@inherits InputText

The documentation also gives an example of how to inherit a generic component:

@using System.Globalization
@typeparam TValue
@inherits InputBase

So if you then combine the two of those together you can create a component that changes the behaviour of the InputNumber component as follows:

@typeparam TNumber
@inherits InputNumber

Including the type="number" part will give the same behaviour as the existing InputNumber (only allowing numeric character entry, using the up and down arrows to increment/decrement etc.)

If you put the code above in a file called say InputNumberUpdateOnInput.razor in the Shared folder of the Blazor project that component can then be used in the same way you'd use a normal InputNumber, for example:

If you want to control the number of decimal places the component will allow you'd need to make the step value a parameter that you pass into the component. There's more on step in this answer.