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