HTML Dialog上で入力中にEnterキー押下しても大丈夫にする

 HTML Dialog上で入力中にEnterキー押下してしまうとユーザ入力内容が消えてしまう問題を解決する方法です。

 HTML Dialog上でEnterキー押下した場合のデフォルト動作は、Cancelボタン押下された扱いで閉じることです。

しかしこの動作はinput elementにフォーカスが入っている状態でも有効です。

Dialog上でinput elementで入力している途中で閉じてしまいます。

しかも、WebアプリとしてはCancelボタン押下を検出したら入力をなかったことにするはずです。

結果、ユーザとしては入力途中の内容が突然消えてしまうわけで、困ります。

 

そこでこの、キャンセルで閉じてしまうDialogの動作を変更します。


// MEMO デフォルトではdialog内のinputでEnter押下すると、dialogが閉じてしまう。
// そのためEnterキーをキャンセルしつつ、入力の確定は行う処理をここで追加。
dialog.addEventListener('keydown', (event) => {
const elem = document.activeElement;
console.log(`dialog keydown "${event.key}"`, elem)
if('INPUT' === elem.tagName && 'Enter' === event.key){
elem.dispatchEvent( new KeyboardEvent('change'));
event.preventDefault();
return;
}
});


入力確定したらOKボタン押下扱いでDialogを閉じる、などしたければさらに工夫が必要になりますが、とりあえずこれでユーザ入力が失われる問題は解決します。


なお他の方法。

https://developer.hatenastaff.com/entry/2021/12/01/100000

 

 

0 件のコメント:

コメントを投稿

Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換する

 Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換することができるが、上手く変換されない場合がある。   以前作った魔法陣イラスト素材をイラスト素材ストックサイトへ登録しようと思い立ち、改めて素材用にラスタライズ変換をかけようとした。   ラスタライズ変換...