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

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

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

পূর্ণ স্ক্রীন মোড থেকে প্রস্থান করতে Escape কী টিপুন।

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

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

  • 68
  • 79
  • এক্স
  • এক্স

উৎস

কীবোর্ড লক 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 কী টিপে এবং ধরে রাখে , তারা এখনও পূর্ণ স্ক্রীন মোড থেকে প্রস্থান করতে পারে। উভয় বিশ্বের সেরা.

পূর্ণ স্ক্রীন মোড থেকে প্রস্থান করার জন্য Escape কী টিপুন এবং ধরে রাখুন।

ডেমো

আপনি ডেমোতে ডিফল্ট এবং প্রগতিশীলভাবে বর্ধিত রূপ উভয় পরীক্ষা করতে পারেন। ডেমোর সোর্স কোড উপরের স্নিপেটের চেয়ে কম পরিষ্কার, কারণ এটি উভয় আচরণই দেখাতে হবে।

আরও ভাল পূর্ণ স্ক্রীন মোড ডেমো।

প্রস্তুতিতে

অনুশীলনে এই প্রগতিশীল বর্ধন ব্যবহার করতে, শুধুমাত্র উপরের স্নিপেটটি অনুলিপি করুন। এটি কোনও প্রয়োজনীয় পরিবর্তন ছাড়াই কাজ করার জন্য ডিজাইন করা হয়েছে, এমনকি বিদ্যমান পূর্ণ স্ক্রীন কোড সহ। উদাহরণ হিসেবে দেখুন এই পিআর গেমটি Freeciv এর জন্য। একবার PR মার্জ হয়ে গেলে, আপনি Escape টিপে সমস্ত ইন-গেম ডায়ালগ বাতিল করতে পারেন।

GitHub পুল অনুরোধ যা Freeciv গেমে কীবোর্ড লক যোগ করে।

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

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