处理HTML5对话框中的enter键

Question

我已经实现了一个HTML5对话框，只要用户与按钮(发出“关闭”事件)进行交互，它就能正常工作。

但是假设您按了Enter键。该对话框也将关闭。我发现该对话框还会直接截获键盘事件，并自动关闭对话框。这绕过了我的处理代码。

我不知道如何拦截键盘事件，也不清楚事件是在DOM的哪一层被拦截和处理的。在对话框上放置“keyup”或类似的侦听器似乎不会获得该事件。

当对话框处于"on“状态时，键盘事件在默认情况下被截获在哪里?我如何获取它们？

Answer 1

好的，我理解你的行为。

为了测试我的对话框，我有一个带有" dialog“文本的按钮。此按钮上的单击处理程序可切换是否显示该对话框。

所以，我按下对话按钮，对话框就会显示出来。

但是:即使该按钮被模式对话框隐藏，该按钮仍然具有焦点。因此，enter键是由(当前隐藏的)对话框按钮处理的，而不是对话框，也不是对话框中的两个按钮。由于dialog按钮的click处理程序切换对话框的显示状态，因此该处理程序将关闭该对话框。

修复方法是使对话框中的正确按钮具有焦点，因此按Enter键将导致正确的操作。