【C#/Blazor】textareaでTab入力のみを無効化したい

【C#/Blazor】textareaで特定キー入力のみを無効化したいで解決できなかったことの続きとなります。

前提・実現したいこと

Blazorにてtextareaの中でTab文字を使用したいです。
JavaScriptでは下記のようにすることで実現できますが、Blazorで同様のことは可能でしょうか?

html
1<html>
2<body>
3	<textarea
4		id="txt"
5		onkeydown="inputTab(event)"
6		style="height:300px;width:300px;"
7	></textarea>
8
9	<script>
10	const txt=document.getElementById("txt")
11
12	function inputTab(e){
13		if(e.code=="Tab"){
14			e.preventDefault();
15			txt.value+="\t";
16			//本当はカーソル位置にTab挿入。簡略化のため割愛。
17		}
18	}
19	</script>
20</body>
21</html>

発生している問題・エラーメッセージ

Enter等の特殊キーはonkeypressイベントで拾うことができますが、
そもそもTabキーはonkeypressで拾えないようです。
(preventDefaultを使用してもフォーカスの移動が発生します)

Blazor
1<textarea
2	@bind-value="txt"
3	@bind-value:event="oninput"
4	@onkeypress="inputTab"
5	@onkeypress:preventDefault="useTab"
6	style="height:300px;width:300px;"
7></textarea>
8
9@code{
10	bool useTab=false;
11	string txt="";
12
13	void inputTab(KeyboardEventArgs e){
14		if(e.Key=="Tab"){
15			useTab=true;
16			txt+="\t";
17			//本当はカーソル位置にTab挿入。簡略化のため割愛。
18		}
19		else{
20			useTab=false;
21		}
22	}
23}

該当のソースコード

質問事項用のソースコードは下記リポジトリにまとめています。
TestKeyOff

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

.NET Core SDK (3.1.200)
Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

onkeypressが使用できないため、正直詰みだと思うのですが、
もし、解決できる方法がありましたらお教えいただけると幸いです。
どうぞ、よろしくお願いします。

退会済みユーザー

2020/03/24 13:33 編集

> 【C#/Blazor】textareaで特定キー入力のみを無効化したいで解決できなかったことの続きとなります。続き？　何を言ってるのかなという感じですけど。何で前のスレッドでは Enter キーでそれが今度は Tab キーに変わったのか、何故最初からやりたいことが書けなかったのか、説明願います。人に無駄な時間と労力を使わせたと反省の言葉はないのですか？

YOS_G-sepc

2020/03/24 13:43

その件については多大なお手数をかけてしまったことについて大変申し訳ございません。 EnterキーとTabキーはともに同系統な特殊なキーという認識をしており、より一般的な認識のEnterキーを例として選択してしまっておりました。 (htmlではEnterとTabで同様の挙動を示していたので、Blazorも同じになるだろうとの考えでした) 結果、多重な質問となってしまったのは私の責任です。ご迷惑をおかけしたこと重ねてお詫び申し上げます。

len_souko

2020/03/24 15:53

ってか、あそこまで情報が出てるんだから試せばえぇやんあと、JSでonkeydownなのになんでBlazorでonkeypressしか試さへんの？

YOS_G-sepc

2020/03/25 12:07

>> あと、JSでonkeydownなのになんでBlazorでonkeypressしか試さへんの？この一言が全てでした(手元で動作を確認して解決しました)。手元のソースコードに頂いたご意見を部分的に反映して動作を確かめていたのですが、当方の勘違いでjs側とBlazor側で使っているイベントが間違っていたようでした。 (js側: onkeydown、Blazor側: onkeypress) (Enterではどちらのイベントでの動作でも正しく動いているように見えていたことも一因てす) jsであってもonkeypressであればフォーカスが移るようになっているのですね… 勉強になりました。 SurferOnWwwさんのご意見をベストアンサーとしたいところですが、ご回答という形で頂いておりませんでしたので今回は自己解決という形といたしますね。結局一人相撲で大変お見苦しいところをお見せしてしまいましたが、一つ前の質問も含めてお付き合いありがとうございました。

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

回答3件

ベストアンサー

自分で調べましょう
前質問で僕の回答にベストアンサーつけたのに何を確認しましたか？
【C#/Blazor】textareaで特定キー入力のみを無効化したい

試したいキーのCodeやKeyを拾って確認すればいいだけ
イベントはjsのイベントがそのまま使えるはずだけど、インテリセンスであるかどうかの確認もできるので@onkeyupなども試せばいい

ゆーたかてまだ正式リリースじゃないプレビュー版で破壊的変更もちょくちょく起きてるんだしある程度は自力で何とかしないと
ただし、.NET 5 preview-1 sdkを入れた場合はVSプレビュー版だとプロジェクトテンプレートが見れない罠があるので要注意

2020/03/25 19:53
キーイベントをdown・up・press全部入れてログをまとめました
質問文通りにtextareaの文字列にtabを追加するようにしました
カーソル位置などは考慮していません

2020/03/26 20:15 ぎっとはぶのれぽじとりに追加しました

Index.razor

C#
1@page "/"
2
3<h1>Hello, world!</h1>
4
5Welcome to your new app.
6
7<SurveyPrompt Title="How is Blazor working for you?" />
8
9
10<a href="https://teratail.com/questions/248757">てらてーる248757</a>
11
12<p>
13    <span style="color:red;">@msg</span>
14</p>
15<p>
16    <textarea @bind="txtarea"
17              @onkeydown="inputDown"
18              @onkeydown:preventDefault="isPrEvDefdown"
19              @onkeyup="inputUp"
20              @onkeyup:preventDefault="isPrEvDefup"
21              @onkeypress="inputPress"
22              @onkeypress:preventDefault="isPrEvDefpress"></textarea>
23</p>
24
25<p>
26    きーログ
27    <div style="height:200px;overflow-y:scroll;">
28        @foreach (var k in Log)
29        {
30            @k<br />
31        }
32    </div>
33</p>
34
35@code
36{
37
38    List<string> Log { get; set; } = new List<string>();
39
40    string txtarea { get; set; } = string.Empty;
41    string msg { get; set; } = string.Empty;
42
43    bool isPrEvDefdown { get; set; } = false;
44
45    private void inputDown(KeyboardEventArgs e)
46    {
47        isPrEvDefdown = IsKey(e, "Tab");
48    }
49
50    bool isPrEvDefpress { get; set; } = false;
51
52    private void inputPress(KeyboardEventArgs e)
53    {
54        isPrEvDefpress = IsKey(e, "Tab");
55    }
56
57
58    bool isPrEvDefup { get; set; } = false;
59
60    private void inputUp(KeyboardEventArgs e)
61    {
62        isPrEvDefup = IsKey(e, "Tab");
63    }
64
65    private bool IsKey(KeyboardEventArgs e,string chkKey, [System.Runtime.CompilerServices.CallerMemberName] string member = "")
66    {
67        Log.Add($"{DateTime.Now.ToString("hh:mm:ss.fff")}：[{member}]Key({e.Key})Code({e.Code})");
68        if (e.Key == "Tab")
69        {
70            msg = "たぶ！！";
71            txtarea = $"\t{txtarea}";
72            return true;
73        }
74        else
75        {
76            msg = string.Empty;
77            return false;
78        }
79    }
80
81}

動作確認ブラウザ
EdgeHTMLのEdge
ChroniumのEdge
Chrome
Firefox

投稿2020/03/24 16:08

編集2020/03/26 11:16

len_souko

総合スコア1363

退会済みユーザー

2020/03/25 00:48

対象が Enter キーではなく、Tab キーに変わってきていて、普通 Tab キーを押すとフォーカスが移動するところを preventDefault して（フォーカスが飛ばないようにして）、Tab も textarea の入力として受け取りたいという話に変わったようです。 Tab キーでは onketdown, onkeypress とか何も関係なく、C# のコードには制御は飛ばずブラウザ側だけの動作でフォーカスは移動して行ってしまうはずです。len_souko さんの環境では違う結果になるのでしょうか？

len_souko

2020/03/25 01:13

出先で確認できないけど、onkeydownでイベントを拾うことは確認済みです onkeypressではイベントハンドラに到達できませんでした寝る直前だったので、条件をEnterのままだったので、tab移動まで殺せるかどうかは未確認です

len_souko

2020/03/25 10:47

確認しました tab移動は殺せました

len_souko

2020/03/25 11:02

onkeydownだけで十分タブ移動を殺してタブ文字挿入でテキストエリアにフォーカスを残すことができました

退会済みユーザー

2020/03/25 11:53

確認結果の連絡をありがとうございます。何が違うのか分かりませんが、何にせよ質問者さんのフィードバックがないと話が進まなそうなので、それを待ちたいと思います。

YOS_G-sepc

2020/03/25 12:10

度々お手数をお掛けして申し訳ございません。一つ前の質問で頂いていた回答ではonkeydownで頂いていましたが手元のソースコードでonkeypressを使用していたため勘違いを起こしておりました。ですので元々頂いていたlen_soukoさんの解決策がこの場合の解決策として最も適切なものでした。勝手な勘違いにより起こしてしまった質問で大変申し訳ございませんが自己解決として閉じさせていただきます。一つ前の質問も含めてお付き合いありがとうございました。

YOS_G-sepc

2020/03/27 14:30

ベストアンサーを変更させていただきました。

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

onkeypressが使用できないため、正直詰みだと思うのですが、

onketdown, onkeypress 等の設定に関わらず、Tab キーでは C# のコードには制御は飛ばずブラウザ側だけの動作になってフォーカスは移動して行ってしまうので「正直詰み」と判断されたのでしょうか。

自分の環境でも同様で、Tab キーを押した際は C# のコードには制御が飛ばず、C# のコードで何とかするのはお手上げです。（少なくとも自分は。ただ、自分が知らないだけで何か方法があるのかもしれませんが）

Blazor の C# のコードで何らかの処置が必要とかの事情がなければ、html と javascript でブラウザ側だけで対応するようにしてはいかがですか？

つまり、

(1) 質問者さんの HTML のコードの方の <textarea ...></textarea> 部分をそのままの形で Blazor に書く、

(2) 質問者さんの HTML のコードの中の JavaScript コードは外部スクリプトファイルにして wwwwroot 下に置く、

(3) _Home.cshtml (質問者さんの環境では index.html ですか？）に <script src="***" ...></script> を追加して、その *** で上記 (2) の外部スクリプトファイルを参照する

・・・ということです。

【訂正】

上の回答で、

自分の環境でも同様で、Tab キーを押した際は C# のコードには制御が飛ばず、

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

もう一度試してみたところ、onkeydown の時は Tab キーを押して C# のコードに制御が飛びました。

ただし、@onkeydown:preventDefault="xxx" として C# 側のコードで xxx の true / false を切り替えてコントロールするのは、タイミングの問題でダメでした。それは前のスレッドの私の回答に書いたことと同じです。

また、単に @onkeydown:preventDefault として常に preventDefault を有効にして C# 側のコードで対処するのは、Tab キーは対応できても、その他の特殊キー（矢印、BackSpace、Enter など）がダメです。

Tab キー以外の特殊キーも無理やり何とかしたとしても、IME が ON の時（直接入力以外の時）が問題で、そこに越えられない壁がありそうです。

という訳で、上の回答の html と javascript だけで対応する他なさそうです。（少なくとも自分が考え付く手段としてはですが）

投稿2020/03/25 02:54

編集2020/03/26 03:13

退会済みユーザー

総合スコア0

YOS_G-sepc

2020/03/25 12:43

>> 「正直詰み」と判断されたのでしょうか。質問への追記修正の中で返信させていただいていますが、onkeypressでTabによるイベントが発火しないのでフレームワーク上の仕様=詰みであると思っていました。 >> html と javascript でブラウザ側だけで対応するようにしてはいかがですか？これも一つの手ではありますが、個人的には最終手段としたいところですね。 JavaScriptの世界からどこまでC#の世界へ持ってこれるかを試していて生じた問題でもありますので。個人的な事情で振り回す結果となってしまいすみませんでした。

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

html/jsでTabキーを拾うにはonkeypressではなくonkeydownイベントでなければならないとのことでした。
Blazor以前の問題です。

今回Blazorでonkeypressを使いTabキーの動作を拾おうとしていたため、
「BlazorではTabを拾えない」と勘違いをしていましたが、
onkeydownイベントを使用することで解決いたしました。

下記が修正済みのソースコードとなります。

<textarea
	@bind-value="txt"
	@bind-value:event="oninput"
	@onkeydown="inputTab"
	@onkeydown:preventDefault="useTab"
	style="height:300px;width:300px;"
></textarea>

@code{
	bool useTab=false;
	string txt="";

	void inputTab(KeyboardEventArgs e){
		if(e.Key=="Tab"){
			useTab=true;
			txt+="\t";
			//本当はカーソル位置にTab挿入。簡略化のため割愛。
		}
		else{
			useTab=false;
		}
	}
}

この度の質問でお付き合いいただいた方々にはご迷惑をおかけして本当にすみませんでした。

これまでお付き合いいただきありがとうございました。

投稿2020/03/25 12:26

YOS_G-sepc

総合スコア29

len_souko

2020/03/25 12:35

僕の回答の抜出の自己回答にベストアンサーはないゎ

Zuishin

2020/03/26 02:34

追記修正依頼の欄に自己解決の理由が書いてありますが、まったく意味がわかりません。

退会済みユーザー

2020/03/26 02:54 編集

前のスレッドの時にも書きましたが、@onkeydown:preventDefault="xxx" として C# 側のコードで xxx の true / false を切り替えてコントロールするのは、タイミングの問題でダメなはずです。質問者さんのコードをそのままコピペして試してみましたが、例えば一番最初の文字の入力で Tab キーを押すと、その時点では preventDefault は働かないので、フォーカスは移動してしまいます。

len_souko

2020/03/26 11:01

ちなみに、僕が確認したのはBlazorWebAssemblyです。 Blazorの本来のものがWebAssemblyなので、どれか指定がない場合はWebAssemblyで試しています。ひょっとしたらBlazorServerだとSignalRでサーバーと通信するのに時間がかかるからイベントの無効化が間に合わないとかありそうな気がしたので

len_souko

2020/03/26 11:17

僕の回答にGitHubのレポジトリへのリンクを追記しましたのでお試しください超てきとーですけどね

退会済みユーザー

2020/03/26 21:23

len_souko さん> 情報をありがとうございます。

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

あなたの回答