我正在尝试创建一个使用WASD移动WebGL(three.js)相机的应用程序。但是,当我使用
时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") }
});
现在,听众根本没有工作,所以有可能让这项工作成功吗?
答案 0 :(得分:0)
为了使其有效,您的元素必须是focused:
当元素聚焦时,文档接收的关键事件必须 针对那个元素。可能没有关注的元素;什么时候没有 元素是集中的,文档接收的关键事件必须是 针对the body element
但是,为了能够聚焦元素,它必须是focusable:
如果满足以下所有条件,则元素可以聚焦:
- 已设置元素tabindex focus flag。
- 该元素可以是being rendered,也可以是
canvas
represents的embedded content元素的后代。- 元素不是inert。
- 元素不是disabled。
通常,问题是缺少tabindex焦点标志。您可以通过添加带有整数值的tabindex
attribute来添加它。
一旦元素可聚焦,你需要关注它。有多种方法可以做到这一点,例如
.focus()
方法。mousedown
事件)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>
答案 1 :(得分:0)
您需要使用DOMContentLoaded
事件来延迟执行,直到HTML加载完毕。在纯JavaScript中,它看起来像这样:
document.addEventListener('DOMContentLoaded', function() {
var container = document.getElementById('container');
container.addEventListener('keydown', function(e) { alert("a") });
});
使用jQuery,它几乎相同,但有点短:
$(document).ready(function() {
var container = document.getElementById('container');
$(container).keydown(function(e) { alert("a") });
});
(加上Oriol所说的tabindex
。)
答案 2 :(得分:0)
function myFunction() {
alert("a");
}
<body>
<table>
<tr>
<td>
<input type="text" name="container" id="container" value="" onkeydown="myFunction()">
</td>
</tr>
</table>
</body>