Angular_input要素をエンターキーでsubmitする #394
input要素で入力した時、エンターキーでsubmitできれば便利だと思います。ただ日本語の場合、単純にエンターだけを拾うと、文字変換する際のエンターでイベント着火してしまいます。
加えてAngularでは日本語変換を検知する簡単な方法は無さそうで、自前で一工夫する必要があります。
以下はその実装例です。
[html]
<div>
<input [formControl]="yourForm" (keydown.enter)="onSubmit($event)"/>
</div>
<div>
<button (click)="onCancel()">キャンセル</button>
<button (click)="onSubmit($event)">提出</button>
</div>[ts]
public onSubmit(event: any): void {
// 日本語変換時のEnter(keyCode=229)なら何もせず、submitのEnter(keyCode=13)なら処理を実行する
if (event.keyCode && event.keyCode !== 13) {
return;
}
処理を記載;
}
public onCancel(): void {
キャンセル処理を記載;
}
onSubmit()がエンターで実行したい処理で、上記の実装だと①入力完了後にエンターを押した際と、②「提出」ボタンをクリックした際の2つで実行できます。
以下の処理が肝で、
if (event.keyCode && event.keyCode !== 13)eventがkeyCodeを持つ時、それが13（submitのkeycode）以外ならpassします。
htmlで
(keydown.enter)="onSubmit($event)"としていますが、keydownの場合、日本語変換のEnterのkeycodeは229となり、上記のif文でpassされます。
これがkeyupだと、日本語変換のEnterでもkeycodeが13になってしまうので、keydownで実装する必要がある点に注意です。
ここまでお読みいただきありがとうございました！