[英]Firing a keyboard event on Chrome
我正在嘗試使用Chrome上的javascript將鍵盤事件發送到頁面。 我有一個曾經在Firefox上工作的方法:
pressKey = function(key, shift) {
var evt = document.createEvent('KeyboardEvent');
evt.initKeyEvent("keypress", false, true, null, false, false,
shift, false, keyCode(key), key.charCodeAt(0));
document.dispatchEvent(evt);
}
其中key是所需的鍵,keyCode將小寫字母更改為高位字母,並調用charCodeAt()。
我的問題是Safari / Chrome上的事件沒有initKeyEvent,而是initKeyboardEvent。 我可以注意到的主要區別是你必須將密鑰作為keyIdentifier(看起來像一個unicode字符)傳遞,而不是傳遞keycode和keychar。 盡管如此,我仍然無法使其成功。
我也嘗試過這里描述的JQuery方法但沒有成功。
編輯:我進一步調試了這一點,似乎Chrome上的事件確實觸發了偵聽器,但keyCode / charCode始終為0.我試圖設置evt.keyCode或evt.charCode也沒有成功。
如果您想以正確的方式執行此操作,則可以使用DOM 鍵盤事件級別4 KeyboardEvent構造和鍵屬性。
在最新的瀏覽器或DOM Keyboard Event Level 3/4 polyfill中,您可以執行以下操作:
element.addEventListener(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})
“將event.key映射到正常QUERTY(en-US)布局”提案演示的字符值
請注意,最新的Spec(www.w3.org/TR/DOM-Level-3-Events/)中不推薦使用keyCode和charCode 。 因此,Chrome 無法通過keyCode支持實現initKeyEvent 。 但是你總是可以覆蓋這個值: UPDATE :bad method:
var evt = document.createEvent('KeyboardEvent');
evt.initKeyEvent("keypress", false, true, null, false, false,
shift, false, keyCode(key), key.charCodeAt(0));
if(evt.keyCode != keyCode(key)) {
delete evt.keyCode;
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
Object.defineProperty(evt, "keyCode", { keyCode(key) });
}
或者您可以更新事件原型: 更新 :錯誤的方法:
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
var _native_keyCode_getter = Object.getOwnPropertyDescriptor(KeyboardEvent.prototype, "keyCode");
Object.defineProperty(KeyboardEvent.prototype, "keyCode", {
"enumerable" : true,
"configurable" : true,
"get" : function() {
if("__keyCode" in this)return this["__keyCode"];
return _native_keyCode_getter.call(this);
},
"set" : function(newValue) {
return this["__keyCode"] = isNaN(newValue) ? 0 : newValue;
}
});
更新 initKeyboardEvent有各種實現。 在我的KeyboardEvent polyfill中,我以某種方式檢測它( gist ):
var _initKeyboardEvent_type = (function( e ) {
try {
e.initKeyboardEvent(
"keyup" // in DOMString typeArg
, false // in boolean canBubbleArg
, false // in boolean cancelableArg
, global // in views::AbstractView viewArg
, "+" // [test]in DOMString keyIdentifierArg | webkit event.keyIdentifier | IE9 event.key
, 3 // [test]in unsigned long keyLocationArg | webkit event.keyIdentifier | IE9 event.location
, true // [test]in boolean ctrlKeyArg | webkit event.shiftKey | old webkit event.ctrlKey | IE9 event.modifiersList
, false // [test]shift | alt
, true // [test]shift | alt
, false // meta
, false // altGraphKey
);
return ((e["keyIdentifier"] || e["key"]) == "+" && (e["keyLocation"] || e["location"]) == 3) && (
e.ctrlKey ?
e.altKey ? // webkit
1
:
3
:
e.shiftKey ?
2 // webkit
:
4 // IE9
) || 9 // FireFox|w3c
;
}
catch ( __e__ ) { alert("browser do not support KeyboardEvent") }
})( document.createEvent( "KeyboardEvent" ) );
var e = document.createEvent( "KeyboardEvent" );
...
if( "initKeyEvent" in e ) {//FF
//https://developer.mozilla.org/en/DOM/event.initKeyEvent
e.initKeyEvent( type, _bubbles, _cancelable, _view, _ctrlKey, _altKey, _shiftKey, _metaKey, _keyCode, _keyCode );
}
else if( "initKeyboardEvent" in e ) {//https://developer.mozilla.org/en/DOM/KeyboardEvent#initKeyboardEvent()
if( _try_initKeyboardEvent ) {
if( _initKeyboardEvent_type == 1 ) { // webkit
//http://stackoverflow.com/a/8490774/1437207
//https://bugs.webkit.org/show_bug.cgi?id=13368
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _ctrlKey, _shiftKey, _altKey, _metaKey, _altGraphKey );
}
else if( _initKeyboardEvent_type == 2 ) { // old webkit
//http://code.google.com/p/chromium/issues/detail?id=52408
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _ctrlKey, _altKey, _shiftKey, _metaKey, _keyCode, _keyCode );
}
else if( _initKeyboardEvent_type == 3 ) { // webkit
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _ctrlKey, _altKey, _shiftKey, _metaKey, _altGraphKey );
}
else if( _initKeyboardEvent_type == 4 ) { // IE9
//http://msdn.microsoft.com/en-us/library/ie/ff975297(v=vs.85).aspx
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _key, _location, _modifiersListArg, _repeat, _locale );
}
else { // FireFox|w3c
//http://www.w3.org/TR/DOM-Level-3-Events/#events-KeyboardEvent-initKeyboardEvent
//https://developer.mozilla.org/en/DOM/KeyboardEvent#initKeyboardEvent()
e.initKeyboardEvent( type, _bubbles, _cancelable, _view, _char, _key, _location, _modifiersListArg, _repeat, _locale );
}
}
}
我只想把這個基本片段扔出去。 它適用於Chrome,基於Paul Irish提到的黑客攻擊。
它使用charCode而不是keyCode(在某些情況下可能很有用),但如果您願意,請使用keyCode。
var keyboardEvent = new KeyboardEvent('keypress', {bubbles:true});
Object.defineProperty(keyboardEvent, 'charCode', {get:function(){return this.charCodeVal;}});
keyboardEvent.charCodeVal = [your char code];
document.body.dispatchEvent(keyboardEvent);
根據您的需要,TextEvent可能會起作用。 (這對我來說也很適合我的需求 - 對於chrome。這不是跨瀏覽器測試的,但那時,問題是關於chrome的。)
// get a reference to the DOM element you want to affect
var input = document.getElementsByTagName('input')[0];
// create a TextEvent
var textEvent = document.createEvent('TextEvent');
// initialize the TextEvent
textEvent.initTextEvent('textInput', true, true, null, String.fromCharCode(13)+"\r\n", 9, "en-US");
// dispatch ('fire') the TextEvent
input.dispatchEvent(textEvent);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.