Keyboard Lock API के साथ बेहतर फ़ुल स्क्रीन मोड

Escape बटन को फ़ुल स्क्रीन मोड में कैप्चर करने के लिए, Keyboard Lock API का इस्तेमाल करें.

Thomas Steiner

अगर आपने कभी फ़ुल स्क्रीन वेब गेम खेला है, जिसमें गेम में मौजूद डायलॉग पॉप-अप हुआ है, जिसे आपने Escape बटन का इस्तेमाल करके, अचानक रद्द कर दिया हो, तो हो सकता है कि आप फ़ुल स्क्रीन मोड से बाहर निकल जाएं. यह अनुभव इसलिए खराब हो रहा है, क्योंकि Escape बटन के लिए डायलॉग और फ़ुल स्क्रीन मोड "लड़ें". यह एक अलग लड़ाई है, क्योंकि डिफ़ॉल्ट रूप से फ़ुल स्क्रीन मोड हमेशा जीतता है. हालांकि, Escape बटन के साथ किए जाने वाले डायलॉग बॉक्स को विजेता कैसे बनाया जा सकता है? यहां से कीबोर्ड लॉक एपीआई काम करता है.

ब्राउज़र समर्थन

Keyboard Lock API का इस्तेमाल करना

Keyboard Lock API navigator.keyboard. पर उपलब्ध है. Keyboard इंटरफ़ेस का lock() तरीका, फ़िज़िकल कीबोर्ड पर किसी एक या सभी कुंजियों के लिए, बटन दबाने की सुविधा चालू करने के बाद प्रॉमिस दिखाता है. इस तरीके से सिर्फ़ उन कुंजियों को कैप्चर किया जा सकता है जिन्हें मौजूदा ऑपरेटिंग सिस्टम से ऐक्सेस दिया गया है. अच्छी बात यह है कि Escape बटन उनमें से एक है.

अगर आपके ऐप्लिकेशन में फ़ुल स्क्रीन मोड है, तो फ़ुल स्क्रीन मोड का अनुरोध करते समय Escape बटन कैप्चर करके, Keyboard Lock API का इस्तेमाल करें. फ़ुल स्क्रीन मोड से बाहर निकलने पर, Keyboard इंटरफ़ेस के unlock() तरीके का इस्तेमाल करके, कीबोर्ड को अनलॉक करें. इसका मतलब है कि यह अब कैप्चर नहीं किया जाएगा.

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

इसका मतलब है कि जब कोई उपयोगकर्ता फ़ुल स्क्रीन मोड में होता है, तो Escape बटन दबाने से डिफ़ॉल्ट रूप से डायलॉग रद्द हो जाता है. अगर उपयोगकर्ता Escape बटन दबाकर रखता है, तो भी वह फ़ुल स्क्रीन मोड से बाहर निकल सकता है. दोनों दुनिया में सर्वश्रेष्ठ.

डेमो

डेमो में डिफ़ॉल्ट और बेहतर किए गए वैरिएंट, दोनों को टेस्ट किया जा सकता है. डेमो का सोर्स कोड पहले के स्निपेट के मुकाबले कम व्यवस्थित है, क्योंकि इसमें दोनों व्यवहार दिखने चाहिए.

इस्तेमाल की जा रही है

इस प्रोग्रेसिव एन्हैंसमेंट का इस्तेमाल करने के लिए, सिर्फ़ पिछले स्निपेट को कॉपी करें. इसे इस तरह से डिज़ाइन किया गया है कि यह किसी भी ज़रूरी बदलाव के बिना काम कर सकता है. भले ही, पहले से मौजूद फ़ुल स्क्रीन कोड ही काम कर रहा हो. उदाहरण के लिए, Freeciv गेम के लिए यह PR देखें. पीआर मर्ज करने के बाद, Escape दबाकर, गेम में मौजूद सभी डायलॉग बॉक्स रद्द किए जा सकते हैं.

एक बोनस बुकमार्कलेट

फ़ुल स्क्रीन मोड की सुविधा वाले सभी ऐप्लिकेशन या गेम ओपन सोर्स नहीं होंगे या आपके पैच स्वीकार नहीं किए जाएंगे. आपके बुकमार्क बार में, नीचे दिए गए बुकमार्कलेट को जोड़ा जा सकता है. साथ ही, फ़ुल स्क्रीन मोड को बेहतर बनाने के लिए इन पर क्लिक किया जा सकता है.