title: How to make an EditForm Input that binds using oninput rather than onchange?
body: <p>Suppose I want to use an <code>EditForm</code>, but I want the value binding to trigger every time the user types into the control instead of just on blur.</p>
  <p>Suppose, for the sake of an example, that I want an <code>InputNumber&lt;int&gt;</code> that does this? I've tried using different means that are floating around such as <code>bind-Value:event=&quot;oninput&quot;</code> with no success. I was finally able to get more or less what I wanted by copying the AspNetCore source code for <code>InputNumber</code> and overriding/rewriting a few things.</p>
  <p>Here is my <code>InputNumber&lt;int&gt;</code> which accomplishes what I'm hoping for:</p>
  <pre class="lang-cs prettyprint-override"><code>    public class MyInputNumber: InputNumber&lt;int&gt;
      {
          protected override void BuildRenderTree(RenderTreeBuilder builder)
          {
              builder.OpenElement(0, &quot;input&quot;);
              builder.AddAttribute(1, &quot;step&quot;, &quot;any&quot;);
              builder.AddMultipleAttributes(2, AdditionalAttributes);
              builder.AddAttribute(3, &quot;type&quot;, &quot;number&quot;);
              builder.AddAttribute(4, &quot;class&quot;, CssClass);
              builder.AddAttribute(5, &quot;value&quot;, FormatValue(CurrentValueAsString));
              builder.AddAttribute(6, &quot;oninput&quot;, EventCallback.Factory.CreateBinder&lt;string&gt;(this, __value =&gt; CurrentValueAsString = __value, CurrentValueAsString));
              builder.CloseElement();
          }
  
          // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs
          private static string FormatValue(string value, CultureInfo culture = null) =&gt; FormatStringValueCore(value, culture);
          // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs
          private static string FormatStringValueCore(string value, CultureInfo culture)
          {
              return value;
          }
      }
  </code></pre>
  <p>note the &quot;<code>oninput</code>&quot; in the sequence 6 item was changed from &quot;<code>onchange</code>&quot; in the base <code>InputNumber</code>'s <code>BuildRenderTree</code> method. I'd like to know how to:</p>
  <ol>
  <li>see the output of <code>BuildRenderTree</code>, so that I can know how to do this with Razor and/or</li>
  <li>just kind of know in general what sort of Razor syntax would be equivalent to doing this in the future.</li>
  </ol>
  <p>I've gathered from comments in the AspNetCore code that this is definitely not the preferred way of doing this sort of thing, with Razor being the preferred approach. I've tested that this works in .NET Core 3 Preview 7 ASP.NET Core Hosted Blazor by subscribing to the <code>EditContext</code>'s <code>OnFieldChangedEvent</code>, and can see that with this approach I get the different behavior that I'm looking for. Hopefully there is a better way.</p>
  <h3>Update</h3>
  <p>Including some more information about the problem</p>
  <pre class="lang-html prettyprint-override"><code>@using BlazorAugust2019.Client.Components;
  @inherits BlazorFormsCode
  @page &quot;/blazorforms&quot;
  
  &lt;EditForm EditContext=&quot;EditContext&quot;&gt;
      &lt;div class=&quot;form-group row&quot;&gt;
          &lt;label for=&quot;date&quot; class=&quot;col-sm-2 col-form-label text-sm-right&quot;&gt;Date: &lt;/label&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
              &lt;KlaInputDate Id=&quot;date&quot; Class=&quot;form-control&quot; @bind-Value=&quot;Model.Date&quot;&gt;&lt;/KlaInputDate&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group row&quot;&gt;
          &lt;label for=&quot;summary&quot; class=&quot;col-sm-2 col-form-label text-sm-right&quot;&gt;Summary: &lt;/label&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
              &lt;KlaInputText Id=&quot;summary&quot; Class=&quot;form-control&quot; @bind-Value=&quot;Model.Summary&quot;&gt;&lt;/KlaInputText&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group row&quot;&gt;
          &lt;label for=&quot;temperaturec&quot; class=&quot;col-sm-2 col-form-label text-sm-right&quot;&gt;Temperature &amp;deg;C&lt;/label&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
              &lt;KlaInputNumber Id=&quot;temperaturec&quot; Class=&quot;form-control&quot; @bind-Value=&quot;Model.TemperatureC&quot;&gt;&lt;/KlaInputNumber&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group row&quot;&gt;
          &lt;label for=&quot;temperaturef&quot; class=&quot;col-sm-2 col-form-label text-sm-right&quot;&gt;Temperature &amp;deg;F&lt;/label&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
              &lt;input type=&quot;text&quot; id=&quot;temperaturef&quot; class=&quot;form-control&quot; value=&quot;@Model.TemperatureF&quot; readonly /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/EditForm&gt;
  </code></pre>
  <pre class="lang-cs prettyprint-override"><code>using BlazorAugust2019.Shared;
  using Microsoft.AspNetCore.Components;
  using Microsoft.AspNetCore.Components.Forms;
  using System;
  
  namespace BlazorAugust2019.Client.Pages.BlazorForms
  {
      public class BlazorFormsCode : ComponentBase
      {
          public EditContext EditContext;
          public WeatherForecast Model;
  
          public BlazorFormsCode()
          {
              Model = new WeatherForecast()
              {
                  Date = DateTime.Now,
                  Summary = &quot;Test&quot;,
                  TemperatureC = 21
              };
              EditContext = new EditContext(Model);
              EditContext.OnFieldChanged += EditContext_OnFieldChanged;
          }
  
          private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
          {
              Console.WriteLine($&quot;EditContext_OnFieldChanged - {e.FieldIdentifier.FieldName}&quot;);
          }
      }
  }
  </code></pre>
  <p>What I'm looking for is the &quot;<code>EditContext_OnFieldChanged</code>&quot; event to fire when I type into the inputs. The current example works, just looking for a better way.</p>