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

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

Thomas Steiner

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

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

ब्राउज़र सहायता

• 68
• 79
• x
• x

सोर्स

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

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

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

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