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

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

Thomas Steiner

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

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

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

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

अगर आपके ऐप्लिकेशन में फ़ुल स्क्रीन मोड है, तो Keyboard Lock API का इस्तेमाल प्रोग्रेसिव एन्हांसमेंट के तौर पर करें. इसके लिए, फ़ुल स्क्रीन का अनुरोध करते समय Escape कुंजी को कैप्चर करें. 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 के लिए यह पीआर देखें. पीआर मर्ज होने के बाद, Escape दबाकर गेम में मौजूद सभी डायलॉग रद्द किए जा सकते हैं.

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

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