🐼 👮 🕤 क्रोम / क्रोमियम और कीबोर्ड 💉 🤞 🤵🏾

अद्भुत क्रोमियम ब्राउज़र में (मुझे लगता है कि यह Google Chrome पर भी लागू होता है), कीबोर्ड इवेंट जिन्हें जावास्क्रिप्ट द्वारा संभाला जा सकता है, मेरे लिए, कुछ कारणों से, एक बहुत ही अजीब तरीके से व्यवहार करते हैं। मुझे इसकी दो दिलचस्प अभिव्यक्तियाँ मिलीं:

1. onkeyup घटना onkeydown घटना के तुरंत बाद उत्पन्न होती है, और जब कुंजी "क्लैम्पेड" होती है, तो यह जोड़ी की घटनाओं को 25 मिलीसेकेंड की एनविएबल आवृत्ति के साथ उत्पन्न होना शुरू होता है, लेकिन शुरुआत में ठहराव के साथ।

2. यदि, एक कुंजी दबाने और रखने के बाद, अगले एक को दबाएं, तो ~ 500ms का ठहराव होता है, और फिर नई कुंजी के लिए पहले से ही onkeydown / onkeyup युग्म उत्पन्न होता है।

नीचे मैं इस तरह के "प्यारा" कार्यान्वयन बग को दरकिनार करने का अपना तरीका दूंगा।

चेतावनी! विधि सही नहीं है, और अधिकांश भाग के लिए यह काम करने वाले समाधान की तुलना में एक गंदा हैक है।

तो चलिए शुरू करते हैं।

चरण 1. हम जानते हैं कि प्रत्येक 25 एमएस (लगभग इसे प्रायोगिक रूप से प्राप्त किया गया था) पर onkeydown / onkeyup का एक गुच्छा उत्पन्न होता है। पहली बात यह है कि इन घटनाओं के लिए संचालकों को असाइन किया गया है। ऐसा करने के लिए, मैं पहले हैंडलर के साथ एक ऑब्जेक्ट बनाता हूं और उन्हें ऑनडोमरेड्डी इवेंट द्वारा दस्तावेज़ घटनाओं को असाइन करता हूं।

OnDomReady के लिए, मैंने jQuery से एक विधि का उपयोग किया, हालांकि, इसे किसी अन्य के साथ सफलतापूर्वक बदला जा सकता है।

KeyHandler = { // keyDown : function ( e ) { } , // "" keyUp : function ( e ) { } , // , onDomReady . init : function ( ) { document. onkeydown = KeyHandler. keyDown ; document. onkeyup = KeyHandler. keyUp ; } } $ ( document ) . ready ( function ( ) { KeyHandler. init ( ) ; } )

चरण 2. घटनाओं की "हानि" से बचने के लिए जब कई कुंजियों को एक पंक्ति में दबाया जाता है, तो कुंजी दबाए जाने पर कम से कम पहचानकर्ताओं को संग्रहीत करने के लिए किसी प्रकार की संरचना को व्यवस्थित करना अच्छा होगा।

भविष्य में, हम एक पर्यवेक्षक विधि से सभी कीबोर्ड ईवेंट भी करेंगे, जिसकी शुरुआत ऑनकीडाउन इवेंट के दौरान की जाएगी, और जो कि कतार में निष्पादित करने के लिए कोई ईवेंट नहीं है, तो खुद को समाप्त कर देगा।

हमारे ईवेंट हैंडलर बदलें ताकि वे उपयोगी कार्य करें और एक "पर्यवेक्षक" जोड़ें:

KeyHandler = { // KeyHandler , , // "" . pressed : { } , // , , , observed : false , // , , observe : function ( ) { // , , . var count = 0 ; // ,, , "". // .. , . for ( a in KeyHandler. pressed ) { // // - // count ++; } // onkeyup - 25 . // , , . if ( count > 0 ) { setTimeout ( KeyHandler. observe , 25 ) ; } else { KeyHandler. observed = false ; } } , // , onkeydown startObserve : function ( ) { // , observe if ( KeyHandler. observed == false ) { // , KeyHandler. observed = true ; // , // ( ) 25 setTimeout ( KeyHandler. observe , 25 ) ; } } , keyDown : function ( e ) { // "". KeyHandler. pressed [ e. keyCode ] = true ; // . KeyHandler. startObserve ( ) ; } , keyUp : function ( e ) { // "" delete KeyHandler. pressed [ e. keyCode ] ; } , }

सामान्य तौर पर, बग को दरकिनार करने के लिए संपूर्ण एल्गोरिथ्म बहुत सरल है - हम सभी घटनाओं को एक कतार में रखते हैं, और यदि इनपुट पर कोई कुंजी घटना है, तो हम इस घटना के लिए हर 25 मिलीसेकंड पर अनंत काल हैंडलर शुरू करने का प्रयास करते हैं।

लेकिन चूंकि हम इस घटना को प्रत्येक 25 मिलीसेकंड कतार से हटा देते हैं, इसलिए हैंडलर अनंत तक नहीं जा पाएंगे। उसी समय, हमें एक अमूल्य प्लस मिलता है - दूसरी कुंजी दबाए जाने पर पहले से ही दबाए गए कुंजी के लिए घटना को बचाया जाएगा (क्योंकि दूसरी कुंजी दबाए जाने पर ऑनकीप को निष्पादित नहीं किया जाएगा), अर्थात्। हमारे मामले में, दो समानांतर घटनाओं को पहले से ही दबाए गए कुंजी के लिए निष्पादित किया जाएगा, जिसके लिए ब्राउज़र ऑनकीड / ऑनकीअप घटनाओं की एक जोड़ी उत्पन्न नहीं करता है और दूसरी कुंजी दबाया जाता है।

उसी तरह, हम दूसरी कुंजी दबाए जाने वाले पल के बीच की घटनाओं में ठहराव से छुटकारा पा लेते हैं और वास्तव में, हमारे कुख्यात onkeydown / onkeyup जोड़े को हर ~ 25 मिलीसेकंड उत्पन्न करने की शुरुआत होती है।

चरण 3 अब हम जोड़ते हैं कि हमने किस चीज़ के लिए इतनी मेहनत की है - सीधे उन तरीकों को, जिन्हें कुंजी दबाए जाने पर बुलाया जाना चाहिए (और क्लैंप किया गया)।

KeyHandler = { // , keyBinds : { // // - Chromium'a 40 : function ( ) { // DOWN console. log ( "DOWN key fired" ) ; } , 38 : function ( ) { // UP console. log ( "UP key fired" ) ; } , 39 : function ( ) { // RIGHT console. log ( "RIGHT key fired" ) ; } , 37 : function ( ) { // LEFT console. log ( "LEFT key fired" ) ; } } , observe : function ( ) { var count = 0 ; for ( a in KeyHandler. pressed ) { // // // // if ( typeof KeyHandler. keyBinds [ a ] == "function" ) { setTimeout ( KeyHandler. keyBinds [ a ] , 0 ) ; } count ++; } if ( count > 0 ) { setTimeout ( KeyHandler. observe , 25 ) ; } else { KeyHandler. observed = false ; } } , }

खैर, कुछ अंतिम स्पर्श। हमारा हैंडलर हमेशा के लिए लटक सकता है, अगर अचानक खिड़की की चाबी दबाने पर फोकस खो गया हो। यह एक कुंजी दबाए बिना दूसरे ब्राउज़र टैब पर क्लिक करके प्राप्त किया जा सकता है। इस तरह की घटनाओं से बचने के लिए, हम इसके अलावा onblur इवेंट की प्रक्रिया करेंगे और प्रोसेसिंग कतार को साफ करेंगे, यदि कोई हो।

KeyHandler = { // blur : function ( ) { for ( a in KeyHandler. pressed ) { delete KeyHandler. pressed [ a ] ; } } , init : function ( ) { window. onkeydown = KeyHandler. keyDown ; window. onkeyup = KeyHandler. keyUp ; window. onblur = KeyHandler. blur ; } , }

वह, वास्तव में, सब है। अब कीस्ट्रोक्स को आसानी से संसाधित किया जाएगा, और, सबसे महत्वपूर्ण बात, सभी एक साथ। एक विकास के रूप में, आप कुंजी संयोजनों को दबाने की परिभाषा जोड़ सकते हैं।

मुझे आशा है कि मेरा उदाहरण आपके लिए उपयोगी था।

PS उदाहरण का पूरा कोड यहां देखा जा सकता है: http://elhsmart.net.ru/chrome-keyboard.html

पीपीएस कोड का परीक्षण केवल क्रोमियम में किया गया था। मेरा वर्तमान संस्करण 7.0.505.0 है। अगर कुछ गलत है - लिखो, मैं इसे ठीक करने की कोशिश करूंगा।

क्रोम / क्रोमियम और कीबोर्ड

More articles: