HTML元素上的Javascript onkeydown事件

我正在嘗試使用WASD移動WebGL（three.js）相機的應用程序。但是，當我使用HTML元素上的Javascript onkeydown事件

onkeydown = function(e) { alert("a") }

並嘗試在同一頁面上鍵入文本框，它會觸發偵聽器。我改變了代碼看起來像這樣：

var container = document.getElementById("container"); 
container.onkeydown = function(e) { alert("a") }

但這並沒有工作，因爲HTML內容尚未加載，所以，我加入jQuery的：現在

var container; 
$(function() { 
    container = document.getElementById("container"); 
    container.onkeydown = function(e) { alert("a") } 
});

，聽者沒有按」根本沒有工作，那麼是否有可能做到這一點？

來源

2015-06-29 Firephoenix

您需要使用DOMContentLoaded事件推遲執行，直到HTML加載之後。在普通的JavaScript，它會是這個樣子：

document.addEventListener('DOMContentLoaded', function() { 
    var container = document.getElementById('container'); 
    container.addEventListener('keydown', function(e) { alert("a") }); 
});

使用jQuery，這幾乎是相同的，但有點短：（加什麼奧里奧爾說，大約tabindex）

$(document).ready(function() { 
    var container = document.getElementById('container'); 
    $(container).keydown(function(e) { alert("a") }); 
});

來源

2015-06-29 02:03:42 celticminstrel

雖然這是有道理的，但當我嘗試它不起作用。如果我錯了，請糾正我，但如果偵聽器不在全局範圍內，則無法觸發偵聽器。 – Firephoenix

我不確定你的意思是不在全球範圍內。也許有一些關於你的代碼的重要細節，你遺漏了嗎？另外，確保容器像Oriol說的那樣可以聚焦。 – celticminstrel

如果您感到困惑，我很抱歉。我的意思是這樣的： 'function a（）{//當{ // //它被觸發到函數外部時，我不能指望函數內部的監聽器被觸發} – Firephoenix

爲了使其工作，你的元素必須是focused：

當一個元素是集中，由文檔接收的鍵事件必須在那個元素的目標。可能沒有重點;當沒有元素集中，由文檔接收的鍵事件必須在the body element針對性

然而，爲了能夠集中精力元素，它必須是focusable：

的元素如果滿足以下所有條件，則爲可聚焦：

設置元素的tabindex focus flag。

元素是being rendered或是canvas元素的後代represents embedded content。

元素不是inert。

元素不是disabled。

通常，問題是缺少tabindex焦點標誌。您可以通過添加一個具有整數值的tabindex attribute來添加它。

元素一旦可以聚焦，您需要將其關注。有多種方法可以做到這一點，例如

使用JavaScript，使用.focus()方法。
用鼠標單擊它（而不取消mousedown事件）
按下Tab鍵瀏覽可調焦元素。如果您使用了非負數tabindex，該元素最終將變得專注。

例如：

var container = document.getElementById("container"); 
 
container.onkeydown = function(e) { alert("Key detected") }

#container { border: 3px solid red; padding: 10px; } 
 
#container:focus { border-color: green; } 
 
#container:after { content: "Now I'm not focused, so it won't work. Click me."; } 
 
#container:focus:after { content: "Now I'm focused, so it will work. Press a key."; }

<div id="container" tabindex="-1"></div>

來源

2015-06-29 02:00:18 Oriol

謝謝你的快速回答。這是否也適用於畫布？ – Firephoenix

@Firephoenix是的，它應該與畫布一起工作（但不適用於畫布中繪製的形狀）。 – Oriol

出於測試目的，我嘗試將代碼中的元素聚焦，然後按下按鈕。然而，它沒有檢測到關鍵字，並且所有關注的條件都得到了滿足。 – Firephoenix

function myFunction() { 
 
    alert("a"); 
 
}

<body> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
      <input type="text" name="container" id="container" value="" onkeydown="myFunction()"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

來源

2015-06-29 02:25:12 Cherryishappy

HTML元素上的Javascript onkeydown事件

回答

相關問題