web-dev-qa-db-ja.com

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があることです。私が気づくことができる主な違いは、キーコードとキー文字を渡す代わりに、キーを（Unicode文字のように見える）keyIdentifierとして渡す必要があることです。それにもかかわらず、それをうまく機能させることができません。

説明したJQueryのアプローチも試してみました here 成功しませんでした。

編集：これをもう少しデバッグしましたが、Chromeのイベントはリスナーをトリガーしますが、keyCode/charCodeは常に0です。evt.keyCodeまたはevt.charCodeを設定しようとしましたが、成功しませんでした。

javascriptgoogle-chromewebkit
26
fserb

この基本的なスニペットを捨てたいだけです。 Chrome=で動作し、Paul Irishによって言及されたハックに基づいています。
keyCodeの代わりにcharCodeを使用します（特定の状況で役立ちます）が、必要に応じて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);
5
Protector one

私はこれを Webkitのバグ まで追跡しました-ここで、作成されたイベントにはKeyIdentifierのみが含まれ、 ブラウザのソースコード で確認できるkeyCode/charCodeは含まれていません。これを解決するためのパッチがあるようです。だから、これはもう適切な質問ではないと思います...

19
fserb

正しい方法で実行したい場合は、DOMKeyboard Event Level 4 KeyboardEvent構文とkeyプロパティ。

最新のブラウザまたは DOMキーボードイベントレベル3/4ポリフィル を使用すると、次のようなことができます。

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）レイアウトの文字値にマップ"提案デモ

keyCodeとcharCodeは最新の仕様（www.w3 .org/TR/DOM-Level-3-Events /）。したがって、Chromeを実装するチャンスはありませんinitKeyEventwithkeyCodeサポート。ただし、この値はいつでもオーバーライドできます：[〜＃〜] update [〜＃〜]：悪いメソッド：

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) });
}

または、updateイベントプロトタイプを使用できます：[〜＃〜] update [〜＃〜]：悪い方法：

// 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;
    }
});

UpdateinitKeyboardEventにはさまざまな実装があります。私のKeyboardEventポリフィルでは、次のようにしてそれを検出しています（ 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 );
        }
    }
}
11
termi

必要に応じて、TextEventが機能する場合があります。 （それは私のニーズのために私のために働きました-クロムのために。これはクロスブラウザテストされていませんが、それから質問は特にクロムについてでした。）

// 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);
2
Dennis

createEvent('Event')ではなくcreateEvent('KeyboardEvent')を使用してWebkitバグを回避し、keyCodeプロパティを割り当てることができます。 この答え と この例 を参照してください。

2
John