blazor oninputイベント

投稿日: 2023年3月29日 作成者: takezou

blazorで<input …＞コントロールの内容が変更された時のイベントとして、onchangeとoninputがあるが、onchangeはコントロールから、フォーカスが外れたときに発生するため、文字の入力中や変更中の値を取得することができない。

これに対して、oninputイベントは文字や値が変更されると即時に発生するため、入力中の文字や変更中の値をリアルタイムに取得することができる。

以下サンプル

@page "/change"

<table>
    <tr>
        <td>onchange:</td><td><input type="text" @onchange="TextChanged"/></td>
    </tr>
    <tr>
        <td>oninput:</td><td><input type="text" @oninput="TextChanged"/></td>
    </tr>
</table>
<br/>
Input Text:@Message

@code {
    protected string? Message;
    protected void TextChanged(ChangeEventArgs e) {
        Message = e.Value?.ToString();
    }
}

忘れない様にメモ。

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。