কীবোর্ড লক API সহ আরও ভাল পূর্ণ স্ক্রীন মোড

পূর্ণ স্ক্রীন মোডে Escape কী ক্যাপচার করতে কীবোর্ড লক API ব্যবহার করুন।

Thomas Steiner

আপনি যদি কখনও একটি পূর্ণ স্ক্রীন ওয়েব গেম খেলে থাকেন যা একটি ইন-গেম ডায়ালগ পপ আপ করে যা আপনি ইস্কেপ কী দিয়ে স্বতঃস্ফূর্তভাবে বাতিল করেছেন, আপনি সম্ভবত নিজেকে পূর্ণ স্ক্রীন মোড থেকে বের করে দিয়েছেন। এই হতাশাজনক অভিজ্ঞতা এস্কেপ কী এর জন্য ডায়ালগ এবং পূর্ণ স্ক্রীন মোড "যুদ্ধ" এর কারণে ঘটে। এটি একটি অসম যুদ্ধ কারণ, ডিফল্টরূপে, পূর্ণ স্ক্রীন মোড সর্বদা জয়ী হয়। কিন্তু কীভাবে আপনি ডায়ালগটিকে এস্কেপ কী-এর বিজয়ী করতে পারেন? এখানেই কীবোর্ড লক API কার্যকর হয়।

ব্রাউজার সমর্থন

কীবোর্ড লক API ব্যবহার করুন

কীবোর্ড লক API navigator.keyboard. Keyboard ইন্টারফেসের lock() পদ্ধতি ফিজিক্যাল কীবোর্ডের যেকোনো বা সমস্ত কীগুলির জন্য কী প্রেসের ক্যাপচার সক্ষম করার পরে একটি প্রতিশ্রুতি প্রদান করে। এই পদ্ধতিটি শুধুমাত্র অন্তর্নিহিত অপারেটিং সিস্টেম দ্বারা অ্যাক্সেস মঞ্জুর করা কীগুলি ক্যাপচার করতে পারে। ভাগ্যক্রমে এস্কেপ কী তাদের মধ্যে একটি।

যদি আপনার অ্যাপে পূর্ণ স্ক্রীন মোড থাকে, তাহলে পূর্ণ স্ক্রীনের অনুরোধ করার সময় Escape কী ক্যাপচার করে একটি প্রগতিশীল বর্ধন হিসাবে কীবোর্ড লক 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 টিপে সমস্ত ইন-গেম ডায়ালগ বাতিল করতে পারেন।

একটি বোনাস বুকমার্কলেট

পূর্ণ স্ক্রীন মোড সমর্থন করে এমন সমস্ত অ্যাপ বা গেম ওপেন-সোর্স হবে না বা আপনার প্যাচগুলি গ্রহণ করবে না, নিম্নলিখিত বুকমার্কলেটটি আপনার বুকমার্ক বারে যোগ করা যেতে পারে এবং আরও ভাল পূর্ণ স্ক্রীন মোড সক্ষম করতে ক্লিক করা যেতে পারে।