JavaScript keyDown不會觸發

我在模態窗口中顯示幻燈片放映的頁面。目標受衆是平板電腦用戶，他們通過從右向左或向左滑動來瀏覽節目，以查看下一張或上一張幻燈片。這一切都很精彩。JavaScript keyDown不會觸發

然而，在有人做使用計算機觀看頁面的情況下，我希望他們能夠用自己的鍵盤上的箭頭鍵進行導航。我能夠檢測到擊鍵，但只能在用戶在模態窗口內點擊之後才能檢測到。我真的希望用戶在鍵盤導航出現之前不必點擊任何地方。這似乎並不重要，我總是嘗試這個問題。

請注意，因爲這是一個模式窗口，它把它的內容中，通過使用一個iFrame的。

這是代碼。我已經證實，它運行在頁面加載時，和pageTurn功能與其他事件的工作原理：

document.onkeydown = function(e){ 
    if (e == null) { 
     keycode = event.keyCode; 
    } else { 
     keycode = e.which; 
    } 
    if(keycode == 37){ 
     pageTurn('right'); 
    } else if(keycode == 39){ 
     pageTurn('left'); 
    } 
};

來源

2012-04-05 unclesol

嘗試將事件附加到document.documentElement而不是僅僅document。

如果失敗，請嘗試將document.body.focus()，以確保該文件已準備好接收鍵盤輸入。

編輯：內部的iFrame中，事件需要被附接到top.document.documentElement代替。

來源

2012-04-05 12:19:55

這些都沒有什麼不同。也許，因爲它是一個帶有iFrame內容的模式窗口，我應該以某種方式訪問父對象？我不確定。我試過parent.focus（），但似乎沒有做任何事情。 – unclesol 2012-04-05 12:30:12

啊，如果它是一個iframe，那麼它會更復雜一點。您需要將事件附加到'top.document.documentElement'。 – 2012-04-05 12:34:01

是的！那就是訣竅。我正在將這個答案標記爲正確的。請更新您的答案以包含iFrame場景。非常感謝你！ – unclesol 2012-04-05 12:37:10

-2

也許你的關鍵代碼是錯誤的。這裏是一個網頁，其中顯示您的瀏覽器代碼：http://asquare.net/javascript/tests/KeyCode.html

如果密碼是正確的，比較事件與您的版本此頁面上的處理代碼。

來源

2012-04-05 12:25:43

嗯，我知道關鍵代碼是正確的，因爲他們一旦點擊了屏幕就可以工作。在你設置的例子中，我對事件處理感興趣的事情是，它首先將焦點設置爲文本框。正如我所說，點擊屏幕確實讓我的代碼正常工作，所以問題看起來似乎是焦點，但我沒有一個文本框，我希望用戶輸入，我想使用箭頭進行導航。我曾嘗試將注意力集中到頁面中的元素（div ID，隱藏的輸入字段等），但這些在我的情況下似乎都不起作用。 – unclesol 2012-04-05 12:35:18

document適用於附加關鍵事件。此外，keyCode在所有主要瀏覽器中都是和keyup事件的正確屬性，因此無需贅述which。

對於從iframe中連接到父文檔，爲您的意見一個建議，你需要使用parent（用於直接父文檔的窗口）或top（最外層的文檔窗口）：

parent.document.onkeydown = function(e) { 
    e = e || parent.event; 
    var keyCode = e.keyCode; 
    if (keyCode == 37) { 
     pageTurn('right'); 
    } else if (keyCode == 39) { 
     pageTurn('left'); 
    } 
};

來源

2012-04-05 12:48:38

JavaScript keyDown不會觸發

回答

相關問題