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

我對當前Web應用程序的關鍵捕獲狀態感到憤怒。只要你知道你的用戶打算在某個特定的地方打字（例如input字段），只要你想爲整個「應用程序」做全局快捷鍵，它就會很好用，但它似乎崩潰了。捕獲Web應用程序的所有關鍵事件的最佳方法？

我想知道是否有更好的方法來捕獲全部網頁的關鍵事件，而不是我目前使用的方法。

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

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

這偉大工程的用途，但例如在Firefox中，如果用戶恰好心不在焉地把他們的將鼠標懸停在導航欄上，刪除鍵有時會導致用戶「返回」，並且該處理程序永遠不會收到該鍵，以便我可以停止傳播。

我應該綁定一個不同的元素嗎？有更好的插件嗎？我應該避免使用任何綁定到普通Web瀏覽器中的東西的密鑰嗎？

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

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

我想，在這一點上，我正在做的事情是「標準的，知名的方式」。我試圖看看有沒有廣爲人知的外部方式，也許有人知道:-)。

來源

2011-02-10 Riley Dutton

是否有可能迫使專注於一個不可見的文本框？我會建議使用通常在瀏覽器中共享的密鑰。當你點擊退格鍵時，期待頁面不會回退，這很愚蠢。 – 2011-02-10 16:18:12

你想創建快捷方式還是要製作鍵盤記錄？ – helle 2011-02-10 16:19:44

@helle我想創建快捷方式，而不是鍵盤記錄。 – 2011-02-10 16:21:52

如果您正在製作具有自定義鍵盤控件的複雜網頁應用程序，則首先應提醒用戶您正在製作具有自定義鍵盤控件的複雜網頁應用程序。之後，告訴他們控件是什麼以及他們做了什麼。

綁定keypress和聽衆的document是做了正確的方式，但你要記住preventDefault和/或stopPropogation對於要覆蓋按鍵。即使沒有默認行爲，在用戶重新啓動其默認鍵盤快捷鍵時，也需要防止它們級聯。

另外，當頁面有焦點時，您將只能接收鍵盤輸入。

當你說刪除我想你指的是退格鍵刪除一般referrs到關鍵旁邊插入，首頁，結束，的Page Up和Page Down鍵。

編輯補充：

要非常小心你選擇覆蓋哪些鍵。如果您正在製作應用程序以供除您以外的人使用，則您必須擔心可用性和可訪問性。覆蓋標籤,空間和輸入密鑰存在風險，特別是對於使用屏幕閱讀器的人員。確保對網站進行盲目測試並解決通過鍵盤瀏覽網頁時可能出現的任何問題。

來源

2011-02-10 16:18:56 zzzzBov

是的，我的意思是Backspace，儘管我會將這個特定的快捷鍵綁定到兩個鍵。 – 2011-02-10 16:21:27

-1

絕對非測試，但...試試'窗口'元素。

來源

2011-02-10 16:17:36 davidgnin

您無法綁定發生在您無法控制的事件 - 例如，窗口鑲邊。像大多數web應用的解決方法是要求用戶確認他們決定離開頁面，使用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

來源

2011-02-10 17:10:50

也許你可以使用HTML屬性ACCESSKEY和反應在焦點上。即：

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

我認爲ü可能需要在tabIndex添加標籤，如<div>

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

來源

2011-02-10 23:12:55 helle

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

回答

相關問題