2010-09-09 84 views
35

我想通過攔截文檔對象的按鍵事件處理程序而不是accesskey屬性來將鍵盤快捷鍵支持添加到我的Web應用程序中的幾個頁面。覆蓋瀏覽器的鍵盤快捷鍵

問題是,每個瀏覽器都有自己的鍵盤組合,所以不可能想出一套適用於所有瀏覽器並且一致的鍵盤組合(例如,如果保存的快捷方式很簡單是按Ctrl + + 小號,而一個用於刪除是Alt鍵 + d。)

所以我想這將只是簡單的幾個與我的頁面完全重寫瀏覽器快捷方式。

拋開所有的缺點,這有可能嗎?如果是這樣,你怎麼做?

+2

就我個人而言,請避免重寫常見的瀏覽器快捷方式,瀏覽器,如'Cw','Ct','CSt' ......一些谷歌的產品覆蓋常用的瀏覽器快捷方式和其令人難以置信的煩人之間是一致的! – 2016-07-19 09:23:33

+1

可能很難知道什麼是「常見」用戶快捷方式。例如,很多用戶使用'C-e'還是比較好的覆蓋?使用每個瀏覽器快捷方式的用戶百分比圖表會很棒。 – JKillian 2018-01-11 00:20:29

回答

12

有這樣一個出色的網絡覆蓋在這裏:http://unixpapa.com/js/key.html

至於這是否是一件應該做的事,計算器的問題編輯器覆蓋的相當多的按鍵,而不(在工具欄按鈕懸停)破壞過多。

+3

你需要用'e.preventDefault()處理* keydown *事件。 e.stopPropagation();'。在處理keydown時,要記住的一件事是,如果用戶長時間按住按鍵,它可能會發生多次。 – ShitalShah 2014-01-13 08:50:11

+7

你應該直接在堆棧溢出回答這個問題,而不是鏈接到其他地方(外部鏈接可以打破或改變或不直接回答問題)。請參閱[是否只包含其他鏈接的答案,真的是「好答案」?](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers )。 – mgiuca 2014-02-07 05:10:55

+0

雖然我使用StackOverflow的問題編輯器,但我真的很討厭Ctrl-L被盜的方式。在編輯問題時更難以進行網絡搜索。 – 2016-09-16 21:48:39

29
onkeydown = function(e){ 
    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){ 
    e.preventDefault(); 
    //your saving code 
    } 
} 
+5

在很多情況下,我認爲這不會起作用。像'tab'這樣的鍵,很多瀏覽器會在腳本正確改變鍵的行爲之前攔截該命令。 – Trafalmadorian 2010-09-09 22:15:06

+4

'event.preventDefault'只適用於符合W3C標準的瀏覽器,不是(比如說)普通網絡上的主流瀏覽器,微軟的 - 除非你使用像jQuery這樣的庫來添加它爲你。 – 2010-09-09 22:15:54

+3

T.J.>你的意思是即使在IE上jQuery可以重寫鍵盤快捷方式? – 2010-09-09 22:23:10

8

這是我解決這個問題:

大部分(如果不是全部)瀏覽器的快捷方式都將被覆蓋。只有系統的,如Alt + TabWindows鍵不會。

document.onkeydown = overrideKeyboardEvent; 
document.onkeyup = overrideKeyboardEvent; 
var keyIsDown = {}; 

function overrideKeyboardEvent(e){ 
    switch(e.type){ 
    case "keydown": 
     if(!keyIsDown[e.keyCode]){ 
     keyIsDown[e.keyCode] = true; 
     // do key down stuff here 
     } 
    break; 
    case "keyup": 
     delete(keyIsDown[e.keyCode]); 
     // do key up stuff here 
    break; 
    } 
    disabledEventPropagation(e); 
    e.preventDefault(); 
    return false; 
} 
function disabledEventPropagation(e){ 
    if(e){ 
    if(e.stopPropagation){ 
     e.stopPropagation(); 
    } else if(window.event){ 
     window.event.cancelBubble = true; 
    } 
    } 
} 
+4

這不會阻止ALT + E啓動瀏覽器編輯菜單。 – 2014-10-23 15:49:31