क्रोम पर एक कीबोर्ड ईवेंट फायरिंग

Question

मैं क्रोम पर जावास्क्रिप्ट का उपयोग कर एक पेज पर एक कीबोर्ड ईवेंट आग लगाने की कोशिश कर रहा हूं। मैं एक दृष्टिकोण है कि 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); 
} 

जहां कुंजी वांछित कुंजी है और कीकोड highercase में छोटे अक्षरों में परिवर्तन और भी charCodeAt कॉल()।

मेरी समस्या यह है कि सफारी/क्रोम पर होने वाली घटनाओं में initKeyEvent नहीं है, लेकिन initKeyboardEvent। मुख्य अंतर जो मैं देख सकता था वह था कि आपको कुंजीकोड और कीचर पास करने के बजाए कुंजी को एकइंडेंटिफायर (जो एक यूनिकोड चरित्र की तरह दिखता है) के रूप में पास करना होगा। फिर भी मैं इसे अभी भी काम करने के लिए प्रबंधित नहीं कर सकता।

मैंने सफलता के बिना here वर्णित JQuery दृष्टिकोण को भी आजमाया है।

संपादित करें: मैं इस थोड़ा आगे डिबग और ऐसा लगता है कि क्रोम पर घटना श्रोताओं को गति प्रदान करता है, लेकिन कीकोड/charCode हमेशा 0. मैं साथ evt.keyCode या evt.charCode स्थापित करने के लिए कोशिश की है है कोई सफलता नहीं है।

Answer 1

मैं बस इस मूल स्निपेट को वहां फेंकना चाहता हूं। यह क्रोम में काम करता है और पॉल आयरिश द्वारा वर्णित हैक पर आधारित है।
यह कीकोड के बजाय चारकोड का उपयोग करता है (जो कुछ परिस्थितियों में उपयोगी हो सकता है), लेकिन यदि आप कृपया कृपया कुंजीकोड को अनुकूलित करते हैं।

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

Answer 2

मैंने इसे bug on Webkit पर ट्रैक किया है जहां बनाई गई घटनाओं में केवल KeyIdentifier शामिल है लेकिन browser source code पर कोई भी कुंजीकोड/charCode नहीं देखा जा सकता है। ऐसा हल करने के लिए एक पैच चल रहा है। तो मुझे लगता है कि यह अब एक उचित सवाल नहीं है ...

Answer 3

आपकी ज़रूरतों के आधार पर, टेक्स्टवेन्ट काम कर सकता है। (यह मेरी जरूरतों के लिए मेरे लिए काम किया -। क्रोम के लिए इस पार ब्राउज़र का परीक्षण नहीं किया है, लेकिन फिर, सवाल विशेष रूप से क्रोम के बारे में था।)

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

Answer 4

आप सही तरीके से यह कर चाहते हैं, आप कर सकते हैं DOM कीबोर्ड इवेंट लेवल 4 कीबोर्डइवेंट निर्माण और कुंजी संपत्ति का उपयोग करें।

नवीनतम ब्राउज़रों में या 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}) 

Example

"map event.key to character values of a normal QUERTY (en-US) layout" proposal demo

ध्यान दें कि कीकोड और charCode नवीनतम युक्ति (www में पदावनत कर रहे हैं .w3.org/TR/डोम लेवल-3-घटनाक्रम /)। इसलिए initKeyEventकुंजीकोड समर्थन के साथ क्रोम को लागू करने का कोई मौका नहीं है। अद्यतन: लेकिन आप हमेशा यह मान ओवरराइड कर सकते हैं बुरा विधि:

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

Answer 5

आप बल्कि createEvent('KeyboardEvent') से createEvent('Event') का उपयोग कर वेबकिट बग के आसपास काम कर सकते हैं, और फिर keyCode संपत्ति बताए। this answer और this example देखें।