是否有一种简单的方法可以在Javascript中“转发”某个事件?我的最终目标是以下列方式增强UI响应能力:我有一个网站,其中包含一个输入文本字段,用于向后端数据库提交查询。如果用户在输入字段未对焦时按下某个键,我想在文档级别捕获按键事件,并将其转发到输入字段。 (这似乎是增强用户界面响应能力的一种相当常见的方法,例如,Google会在主要搜索网站上执行此操作。)
所以我有一个像这样的文本输入字段:
<input id="query" onkeydown="f(event)">
我试图像这样转发事件:
function handler(ev)
{
var query = document.getElementById("query");
query.dispatchEvent(ev);
}
document.addEventListener("keydown", handler, false);
现在,忽略addEventListener
和dispatchEvent
的跨浏览器问题,这甚至不适用于支持这两种功能的Firefox。 Javascript解释器抛出异常:Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"
那么,甚至可以转发这样的事件吗?或者我是否需要使用initKeyEvent
创建一个新事件,然后将该事件分派给输入元素?
答案 0 :(得分:2)
以下是键盘事件的示例:
HTML文件( index.html ):
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow</title>
<script type="text/javascript" src="sof.js"> </script>
</head>
<body>
<input id="query" onkeydown="f(event);"/>
</body>
</html>
Javascript文件( sof.js ):
function simulateKeyDown () {
// DOM Level 3 events
var evt = document.createEvent ("KeyboardEvent");
// DOM Level 3 events
evt.initKeyboardEvent ("keydown", false, false, null, false, false, false, false, 0, 0);
var query = document.getElementById ('query');
query.dispatchEvent (evt);
}
window.onload = function () {
document.addEventListener ('keydown', simulateKeyDown, false);
}
function f (ev) {
console.log ('ciao');
}
如您所见,当窗口加载时,它会将新处理程序附加到文档的 keydown 事件。 按下某个键时,会创建一个新的 KeyboardEvent 事件,初始化(使用'keydown'),然后调度到 input 元素。是的,它有点复杂和错综复杂,但它有效;)
更多信息:
答案 1 :(得分:1)
我不确定转发,但我认为你做不到。然而,我对最初问题的解决方案是
document.addEventListener("keydown", function(e) {
if (e.target.oMatchesSelector("form *, fieldset *, input, textarea"))
return; // Opera-specific, but I think you get the point of MatchesSelector
if (e.metaKey || e.ctrlKey)
return;
if (e.keyCode < 46 || e.keyCode > 90)
return;
document.getElementById("query").focus();
}, false);
keydown事件对于chararcter输入是不可复制的,因此聚焦输入将足够onkeydown - 该字符将出现在keyup上。
答案 2 :(得分:1)
跟进@ Bergi的回答,对我有用的解决方案就是简单地重定向focus
- 这样事件将会发送到你想要的地方!例如:
document.addEventListener('keydown', function(evt) {
document.getElementById('query').focus();
}, false);
这会将所有keydown事件重定向到query
元素。