【C#/Blazor】textareaで特定キー入力のみを無効化したい

実現したいこと

Blazorにて下記htmlと同様の動作(特定キー入力の無効化)を行いたいです。
通常のJavaScriptにおけるonkeydownでは受け取った引数の中にpreventDefaultメソッドが含まれており、好きな位置で発火させることができます。

html
1<html>
2<body>
3	<textarea onkeydown="inputEnter(event)"></textarea>
4
5	<script>
6	function inputEnter(e){
7		if(e.code=="Enter"){
8			e.preventDefault();
9			alert("inputEnter!");
10		}
11	}
12	</script>
13</body>
14</html>

発生している問題

BlazorでもpreventDefaultは使用できますが、実装が異なり特定キーのみへの適用は不可能なように見えます。

補足情報（FW/ツールのバージョンなど）

.NET Core SDK (3.1.100)
Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Blazorにおいて上記を実現させる方法はありますでしょうか?
どうぞよろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

JSと参考ページをもとに書いてみたけど、こういうこと？

c#
1
2<p>
3    <span style="color:red;">@msg</span>
4</p>
5
6<textarea @bind="txtarea" @onkeydown="inputEnter" @onkeydown:preventDefault="isPrEvDef"></textarea>
7
8@code
9{
10    string txtarea { get; set; } = string.Empty;
11    string msg { get; set; } = string.Empty;
12    bool isPrEvDef { get; set; } = false;
13
14    private void inputEnter(KeyboardEventArgs e)
15    {
16        if (e.Key == "Enter")
17        {
18            msg = "エンターはダメよ！";
19            isPrEvDef = true;
20        }
21        else
22        {
23            msg = string.Empty;
24            isPrEvDef = false;
25        }
26    }
27}

エンター押しても改行されない
ちなみに、onkeypressに変更してもエンターで改行されなかった

htmlに@onkeydown:preventDefault="isPrEvDef"を埋め込んで、
code部分にbool isPrEvDefを定義してやってイベントを止めたいときはtrueにしてそれ以外の場合はfalseにすればおｋ

@on{EVENT}:preventDefault

イベントの既定のアクションを禁止します。

ってのと、

既定のアクションを止める

値なしで @on{EVENT}:preventDefault 属性を指定することは、@on{EVENT}:preventDefault="true" と同じことになります。

ってところでNGキーの場合だけ入力をキャンセルしてそれ以外は入力を受け入れると判断したのでこんな形になった
ちゃうかったらごめんね

2020/03/24 19:31 編集　：　e.CodeだとEdgeHTMLだけ値が取得できていなかったのでe.Keyに修正
動作確認したのは以下のブラウザ
Edge(EdgeHTMLの方)
Edge(Chroniumのベータ版の方)
Chrome
Firefox

投稿2020/03/23 16:24

編集2020/03/24 10:43

len_souko

総合スコア1348

退会済みユーザー

2020/03/24 02:18

そのコードをそのままコピペして自分の環境で試してみましたが、ブラウザによって多少異なる動きはあるものの、改行できてしまうのですが。

len_souko

2020/03/24 10:45

e.Codeだとブラウザによって値が取れたり取れなかったりしたのでe.Keyに変更しました。個人的にはリテラル文字列ではなくて定数を切ってほしかった・・・

len_souko

2020/03/24 10:52

IMEをONにすると挙動がもっとカオスだった Firefoxだと全く取得できないし、EdgeHTMLだとe.Codeは取れないままでe.KeyはUnidentifiedになるし、 ChroniumEdgeではe.CodeはIMEのON／OFF関係なく取得できるけどe.KeyはProcessを取得してる ChromeはChroniumEdgeと同じ結果

YOS_G-sepc

2020/03/24 13:01

ご回答ありがとうございます。 Enterに対してのみpreventDefaultが効いていますね。想定していた挙動そのものでした。ご回答いただいたところ大変申し訳ないのですが、本来はEnterでなくTabキーについて効かせたかったのです。しかし、こちらには使えないようですね… 少し質問の意味が変わってしまうので別質問として改めました。 [【C#/Blazor】textareaでTab入力のみを無効化したい] (https://teratail.com/questions/249171?modal=q-comp) ありがとうございました。

行動規範の内容に同意します

何をしたいのか分からないのでハズレかもしれませんが・・・

textarea 入力に Enter キーを受け付けたくないということであれば、以下のようにしてはいかがですか？

<textarea value="@val" @onkeypress="KeyHandler3" @onkeypress:preventDefault />

@code {
     string val = "";

    private void KeyHandler3(KeyboardEventArgs e)
    {
        if (e.Key != "Enter")
        {
            val += e.Key;
        }
    }
}

ちなみに、参考にされている記事に書いてある、

<input @onkeypress:preventDefault="_shouldPreventDefault" />

の _shouldPreventDefault を true / false に切り替えてコントロールしようと試してみましたが、キーを押した時点で即文字が input 要素の value 属性に反映されてしまうのでダメでした。

【追記】

今思い出したのですが、javascript のコード (Blazor の C# のコードではなく) で IME が ON の時は onkeypress イベントが発生しなくて、やむを得ず onkeyup で処理したことがありました。上の回答は IME が OFF の時しか試していません。今検証できる環境にないので、後で試してみます。

【追記２】

上の追記の件、自分の環境で確認しましたが、IME が ON の時は onkeypress イベントが発生しないということはなくて、期待通り Enter は入力できないようになります。

ブラウザ依存のとことろがあるようですが、Microsoft Edge 44.18362.449.0, Google Chrome 80.0.3987.149, Firefox 74.0, Opera 67.0.3575.97 で試した限り同じ結果でした。

以下の記事にあるよとおり、メジャーなブラウザでは IME が ON の時は onkeypress イベントが発生しないはずなのですが、Blazor では何故クライアント側の @onkeypress="KeyHandler3" の設定でサーバー側の KeyHandler3 ハンドラに制御が飛んでくるのかは分かりませんが。

onkeydown属性 onkeypress属性 onkeyup属性
https://w3g.jp/xhtml/dic/onkeydown

【訂正】

上の【追記２】で、

IME が ON の時は onkeypress イベントが発生しないということはなくて、

と書きましたが、間違いでしたので訂正します。

上に書いた「メジャーなブラウザでは IME が ON の時は onkeypress イベントが発生しない」というのは Blazor でも同じで、自分が提案したコードで IME が ON の時（直接入力以外の時）でもうまくいくのは onkeypress イベントが発生しないので preventDefault が働かないからでした。

但し、Enter キーを押したときは IME が ON の時でも onkeypress イベントは発生し、制御は C# のコードに飛んでくるので期待した結果（Enter キー入力はスキップ）になるということでした。

投稿2020/03/23 10:08

編集2020/03/26 02:26

退会済みユーザー

総合スコア0

YOS_G-sepc

2020/03/24 13:02

ご回答ありがとうございます。単純に代入演算子で文字を流し込むと常に末端に追加されることがネックですね… やりたいことのイメージとしてはおおよそ正しかったです。ご回答いただいたところ申し訳ないのですが、本来はEnterでなくTabキーについて効かせたかったのです。少し質問の意味が変わってしまうので別質問として改めました。 [【C#/Blazor】textareaでTab入力のみを無効化したい] (https://teratail.com/questions/249171?modal=q-comp) ありがとうございました。

行動規範の内容に同意します

あなたの回答