捕獲Web應用程序的所有關鍵事件的最佳方法？

Question

對於Web應用程序的關鍵捕獲當前狀態，我感到非常憤怒。 只要您知道您的用戶將要在特定位置（例如input字段）中鍵入內容，它就會很有效，但只要您想要為整個“應用程序”執行全局快捷方式，它就會崩潰。

我試圖找出是否有更好的方法來捕獲網頁的所有關鍵事件，而不是我目前使用的方法。

我當前的方法是使用綁定到document元素的JQuery Hotkeys插件，即：

$(document).bind("keyup", "delete", function() {});

這對於大多數用途都很有用，但是例如在Firefox上，如果用戶碰巧心不在焉地將鼠標移到導航欄上，則刪除鍵有時會導致用戶“返回”，並且處理程序從未接收到密鑰這樣我就可以停止傳播了。

我應該綁定一個不同的元素嗎？ 那里有更好的插件嗎？ 我應該避免使用常見Web瀏覽器中綁定的任何鍵嗎？

隨着越來越多的Web應用程序看起來模仿他們的桌面版本，這似乎是Web開發人員越來越需要的基本功能。

編輯：我應該指出我已經在使用e.stopPropagation()和e.preventDefault() 。 主要問題似乎是有時事件甚至從未傳遞給綁定函數。 我基本上想知道是否有人想出一個“更高”的元素綁定到document以外的其他元素。 還是有一種我從未想過的替代方案？ 例如，在頁面上嵌入一個不可見的Flash元素，然后將所有鍵從那里傳遞給Javascript（我認為這不會起作用）。

我認為，在這一點上，我做的事情是“標准的，眾所周知的方式”。 我試圖看看是否存在一種尚未被廣泛知曉的開箱即用的方式，也許有人在SO上知道:-)。

Answer 1

如果您正在使用自定義鍵盤控件制作復雜的Web應用程序，那么您應該做的第一件事是提醒用戶您正在使用自定義鍵盤控件制作復雜的Web應用程序。 之后， 告訴他們控件是什么以及他們做了什么。

將keypress和keydown偵聽器綁定到document是正確的方法，但是您必須記住要為要覆蓋的按鍵preventDefault和/或stopPropogation 。 即使沒有默認行為，您也需要防止它們級聯，以防用戶反彈其默認鍵盤快捷鍵。

此外，您只能在頁面具有焦點時接收鍵盤輸入。

當你說刪除我假設你的意思是退格鍵，因為刪除通常是指插入 ， 主頁 ， 結束 ， 向上翻頁和向下 翻頁旁邊的鍵。

編輯添加：

要非常小心你選擇覆蓋哪些鍵。 如果您要將應用程序供自己以外的人使用，則必須擔心可用性和可訪問性。 覆蓋Tab ， Space和Enter鍵是有風險的，特別是對於使用屏幕閱讀器的人。 確保測試網站盲點並修復通過鍵盤遍歷頁面可能出現的任何問題。

Answer 2

也許你可以使用html屬性ACCESSKEY並對onfocus做出反應。 即：

<input type="text" size="40" value="somefield" accesskey="F">

我想你可能需要在像<div>這樣的標簽上添加一個tabindex

<div id="foo" tabindex="1" accesskey="F">

Answer 3

您無法綁定到無法控制的事件 - 例如窗口鑲邊。 大多數webapps處理此問題的方式是要求用戶使用onbeforeunload事件確認他們離開頁面的決定：

window.onbeforeunload = function (e) {
    var str = 'Are you sure you want to leave this page?';
    e = e || window.event;

    if (userHasSomeUnsavedWork) {
        e.returnValue = str;
        return str;
    }
}

• onbeforeunload - MDC

Answer 4

絕對沒有經過測試但是......試試'window'元素。