在JavaScript中触发键盘事件
我试图在Safari中使用JavaScript来模拟键盘事件。
我试过这个:
var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);
还有这个:
var event = document.createEvent("UIEvents"); event.initUIEvent("keypress", true, true, window, 1); event.keyCode = 115;
但是,在尝试这两种方法之后,我遇到了同样的问题:代码执行后,事件对象的keyCode
/属性设置为0
,而不是115
。
有谁知道如何可靠地创建和发送在Safari中的键盘事件? (如果可能的话,我宁愿用普通的JavaScript来实现它。)
你是否正确派遣活动?
function simulateKeyEvent(character) { var evt = document.createEvent("KeyboardEvent"); (evt.initKeyEvent || evt.initKeyboardEvent)("keypress", true, true, window, 0, 0, 0, 0, 0, character.charCodeAt(0)) var canceled = !body.dispatchEvent(evt); if(canceled) { // A handler called preventDefault alert("canceled"); } else { // None of the handlers called preventDefault alert("not canceled"); } }
如果你使用jQuery,你可以这样做:
function simulateKeyPress(character) { jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) }); }
我正在处理DOM键盘事件3级填充 。 在最新的浏览器或者这个polyfill中,你可以这样做:
element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) }) var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true}); element.dispatchEvent(e); //If you need legacy property "keyCode" // Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari) delete e.keyCode; Object.defineProperty(e, "keyCode", {"value" : 666})
更新:
现在我的polyfill支持遗留属性“keyCode”,“charCode”和“which”
var e = new KeyboardEvent("keydown", { bubbles : true, cancelable : true, char : "Q", key : "q", shiftKey : true, keyCode : 81 });
这里的例子
另外这里是跨浏览器initKeyboardEvent与我的polyfill分开: (gist)
Polyfill 演示
这是由于Webkit中的一个错误 。
您可以使用createEvent('Event')
而不是createEvent('KeyboardEvent')
来处理Webkit bug,然后分配keyCode
属性。 看到这个答案和这个例子 。
Mozilla开发人员网络提供以下解释:
- 使用
event = document.createEvent("KeyboardEvent")
创建一个事件 - 初始化关键事件
使用:
event.initKeyEvent (type, bubbles, cancelable, viewArg, ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, keyCodeArg, charCodeArg)
- 使用
yourElement.dispatchEvent(event)
分派yourElement.dispatchEvent(event)
我没有看到你的代码中的最后一个,也许这就是你所缺少的。 我希望这可以在IE浏览器以及…
我不是很好,但KeyboardEvent
=>请参阅KeyboardEvent初始化initKeyEvent
。
这是一个在<input type="text" />
元素上发射事件的例子
document.getElementById("txbox").addEventListener("keypress", function(e) { alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode); }, false); document.getElementById("btn").addEventListener("click", function(e) { var doc = document.getElementById("txbox"); var kEvent = document.createEvent("KeyboardEvent"); kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74); doc.dispatchEvent(kEvent); }, false);
<input id="txbox" type="text" value="" /> <input id="btn" type="button" value="CLICK TO EMIT KEYPRESS ON TEXTBOX" />