Question

我已经找到了很多关于这个主题的信息，但是它们似乎都不起作用了（

）

我想要做的是模拟Chrome 59中的键（向下/按下/向上）事件（我真的不关心其他浏览器）。模拟事件本身不是问题，但问题是我没有找到向后兼容的解决方案并包含charCode / keyCode值。如果由我决定，我会更新其他应用程序的代码以检查密钥/代码，但不幸的是，这不取决于我。

到目前为止我尝试了什么：

var evt = new KeyboardEvent(type, {code: options.charCode, key: options.keyCode, keyCode: options.keyCode, charCode: options.keyCode, which: options.which});
element.dispatchEvent(evt);

根据https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent，这应该可以工作并使用keyCode / charCode /设置创建一个事件，但它不起作用：

我的代码（我尝试使用和不使用引号，使用字符而不是数字）：

new KeyboardEvent("keypress", {code: 123, key: 123, keyCode: 123, charCode: 123, which: 123});

输出：

KeyboardEvent {isTrusted: false, key: "123", code: "123", location: 0, ctrlKey: false…}
altKey:false
bubbles:false
cancelBubble:false
cancelable:false
charCode:0
code:"123"
composed:false
ctrlKey:false
currentTarget:null
defaultPrevented:false
detail:0
eventPhase:0
isComposing:false
isTrusted:false
key:"123"
keyCode:0
location:0
metaKey:false
path:Array(0)
repeat:false
returnValue:true
shiftKey:false
sourceCapabilities:null
srcElement:null
target:null
timeStamp:2469092.6000000006
type:"keypress"
view:null
which:0
__proto__:KeyboardEvent

然后我查看了规范并发现keyCode / charCode / which属性不再存在，这让我相信它已经从标准中删除了，它不应该像这样工作了： https://w3c.github.io/uievents/#keyboardevent

由于这显然不起作用，我开始研究已弃用的函数initKeyboardEvent并尝试了这个：

var evt = document.createEvent("KeyboardEvent");
//Chrome hack
Object.defineProperty(evt, 'keyCode', {
    get : function(){
        return this.keyCodeVal;
    }
});
Object.defineProperty(evt, 'which', {
    get : function(){
        return this.keyCodeVal
    }
});
Object.defineProperty(evt, 'charCode', {
    get : function(){
        return this.charCodeVal
    }
});
//initKeyBoardEvent seems to have different parameters in chrome according to MDN KeyboardEvent(sorry, can't post more than 2 links), but that did not work either
evt.initKeyboardEvent("keypress",
    true,//bubbles
    true,//cancelable
    window,
    false,//ctrlKey,
    false,//altKey,
    false,//shiftKey,
    false,//metaKey,
    123,//keyCode,
    123//charCode
);
evt.charCodeVal = 123;
evt.keyCodeVal = 123;

所以这看起来很有希望，但是当我发送事件时，这是我在处理程序中可以看到的事件：

KeyboardEvent
altKey:false
bubbles:true
cancelBubble:false
cancelable:true
charCode:0
code:""
composed:false
ctrlKey:false
currentTarget:input#iceform:username.iceInpTxt.bookLoginTextbox
defaultPrevented:false
detail:0
eventPhase:2
isTrusted:false
key:""
keyCode:0
location:0
metaKey:true
path:Array[16]
repeat:false
returnValue:true
shiftKey:true
sourceCapabilities:null
srcElement:input#iceform:username.iceInpTxt.bookLoginTextbox
target:input#iceform:username.iceInpTxt.bookLoginTextbox
timeStamp:9932.905000000002
type:"keypress"
view:Window
which:0
__proto__:KeyboardEvent

这是我终于放弃并决定寻求帮助的时候。有没有什么方法可以以一种向后兼容的方式正确模拟这些事件？

请不要想要发出尖叫或类似的事情

Answer 1

好的，我终于找到了问题所在。代码本身实际上是正常的（具有弃用的initKeyboardEvent的代码）。

问题是，我在Chrome扩展程序的内容中执行此操作。在这种情况下，事件的所有属性都会重置为默认值，然后引发事件。我现在正在向包含完全相同代码的页面添加一个脚本，它可以正常工作。

如何使用chrome

1 个答案: