Blazorでテキストボックスの値をキー押下時にリアルタイムにbindする方法

BlazorはWebUIフレームワークで、c#でフロントエンドを記述することができます。

テキストボックスの値をキー押下時にリアルタイムに取得したり、キーイベントを実行することも可能です。

テキストボックスの値をキー押下時にリアルタイムに取得するには

テキストボックスの値をリアルタイムに取得するには、bind-value:eventを使います。

以下のコードのように、bind-value:eventを使うことで、キー押下時にテキストボックスの値をリアルタイムに取得することができます。

@page "/"

<PageTitle>Index</PageTitle>

<h1>bind-valueとkeydownイベントの同時実装テスト</h1>

テキストボックス：<input type="text" id="CommandTextbox" @bind-value="commandString" 
    @bind-value:event="oninput" @onkeydown="OnKeyDownEvent" /> 

<div>
    bind-value : @commandString
</div>

<div>
    onkeydown : @inputString
</div>

@code {
    string commandString = "";

    string inputString = "";

    void OnKeyDownEvent(KeyboardEventArgs e)
    {
        inputString = commandString;
        StateHasChanged();
    }
}

実行すると以下のようになります。

一方で、例えば以下のコードでは、テキストボックスの値をリアルタイムに取得できません。

@page "/"

<PageTitle>Index</PageTitle>

<h1>bind-valueとkeydownイベントの同時実装テスト</h1>

テキストボックス：<input type="text" id="CommandTextbox" @bind-value="commandString" 
    @onkeydown="OnKeyDownEvent" /> 

<div>
    bind-value : @commandString
</div>

<div>
    onkeydown : @inputString
</div>

@code {
    string commandString = "";

    string inputString = "";

    void OnKeyDownEvent(KeyboardEventArgs e)
    {
        inputString = commandString;
        StateHasChanged();
    }
}

実行すると以下のようになります。

違いは、bind-value:eventの有無です。

bind-value:eventがあるとリアルタイムに値を取得してくれます。

bind-value と bind-value:event について

bind-value はテキストボックスの値を変数に格納するための命令です。

一方、bind-value:event は、いつ変数に格納するかを指定します。イベント名はDOMイベントの名称を使用することができます。

テキストボックス(inputタグ)で使用できるイベントハンドラ一覧

inputタグで使用できるイベントハンドラは以下があります。

• onblur : フォーカスを失ったとき
• onchange : 値が変更されてフォーカスを失ったとき
• onfocus : フォーカスされたとき
• oninput : 値が入力されたとき
• onkeydown : いずれかのキーが押されたとき
• onkeypress : いずれかのキーが押されて放されたとき
• onkeyup : いずれかのキーが放されたとき
• onselect : テキストが選択されたとき