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 件のコメント:

コメントを投稿

ドラッグ可能なHTMLダイアログ(pure javascript)

 ファイルを開くダイアログならともかく、Itemの回転ダイアログなどは画面に被っていると、編集対象が隠れてダイアログ操作しずらくなってしまいます。 そこでモーダルダイアログ をドラッグで移動できるようにする必要があります。 HTMLのダイアログの場合、ドラッグ可能にするにはJSが...