वर्चुअल कीबोर्ड एपीआई की मदद से पूरा कंट्रोल

थॉमस स्टेनर

Twitter GitHub Glitch Mastodon होम पेज

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

• 94
• 94
• x
• x

टैबलेट या सेलफ़ोन जैसे डिवाइसों में आम तौर पर टेक्स्ट लिखने के लिए वर्चुअल कीबोर्ड होता है. आम तौर पर, इस्तेमाल होने वाले और हमेशा एक जैसे दिखने वाले फ़िज़िकल कीबोर्ड के उलट, वर्चुअल कीबोर्ड दिखता और गायब हो जाता है. यह उपयोगकर्ता की गतिविधियों पर निर्भर करता है. इसमें, यह डाइनैमिक तौर पर काम कर सकता है. उदाहरण के लिए, inputmode एट्रिब्यूट की मदद से ऐसा किया जा सकता है.

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

परंपरागत रूप से, ब्राउज़र इस चुनौती से खुद ही निपटते रहे हैं, लेकिन ज़्यादा जटिल ऐप्लिकेशन को ब्राउज़र के व्यवहार पर ज़्यादा कंट्रोल की ज़रूरत हो सकती है. इसके उदाहरण में मल्टी-स्क्रीन मोबाइल डिवाइस शामिल हैं. अगर वर्चुअल कीबोर्ड सिर्फ़ एक स्क्रीन सेगमेंट पर दिखाया जाता है, तो पारंपरिक तरीके से “बेकार” स्क्रीन वाला रियल एस्टेट दिखता है. हालांकि, दोनों स्क्रीन पर उपलब्ध व्यूपोर्ट छोटा होता है. नीचे दी गई इमेज में दिखाया गया है कि वर्चुअल कीबोर्ड की मौजूदगी की भरपाई करने के लिए, दस्तावेज़ के लेआउट को डाइनैमिक तरीके से ऑप्टिमाइज़ करने के लिए, Virtualकीबोर्ड API का इस्तेमाल कैसे किया जा सकता है.

इस तरह की स्थितियों में, Virtualकीबोर्ड API का इस्तेमाल किया जाता है. इसके तीन हिस्से होते हैं:

• JavaScript से वर्चुअल कीबोर्ड को प्रोग्राम के हिसाब से ऐक्सेस करने के लिए, navigator ऑब्जेक्ट पर बना VirtualKeyboard इंटरफ़ेस.
• सीएसएस एनवायरमेंट वैरिएबल का सेट, जो वर्चुअल कीबोर्ड के दिखने के बारे में जानकारी देता है.
• वर्चुअल कीबोर्ड की नीति, जो यह तय करती है कि वर्चुअल कीबोर्ड दिखाया जाना चाहिए या नहीं.

मौजूदा स्थिति

वर्चुअल कीबोर्ड एपीआई, Chromium 94 में डेस्कटॉप और मोबाइल पर उपलब्ध है.

सुविधा की पहचान और ब्राउज़र सहायता

नीचे दिए गए स्निपेट का इस्तेमाल करके पता लगाएं कि मौजूदा ब्राउज़र में Virtualकीबोर्ड API काम करता है या नहीं:

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
}

वर्चुअलकीबोर्ड API का इस्तेमाल करना

वर्चुअलकीबोर्ड API, navigator ऑब्जेक्ट में एक नया इंटरफ़ेस VirtualKeyboard जोड़ता है.

वर्चुअल कीबोर्ड की नई सुविधा के लिए ऑप्ट-इन करना

ब्राउज़र को यह बताने के लिए कि वर्चुअल कीबोर्ड की सुविधाओं को आप खुद ठीक कर रहे हैं, आपको सबसे पहले बूलियन प्रॉपर्टी overlaysContent को true पर सेट करके वर्चुअल कीबोर्ड के नए व्यवहार के लिए ऑप्ट इन करना होगा.

navigator.virtualKeyboard.overlaysContent = true;

वर्चुअल कीबोर्ड दिखाना और छिपाना

वर्चुअल कीबोर्ड के show() तरीके को कॉल करके, प्रोग्राम के हिसाब से उसे दिखाया जा सकता है. यह काम करे, इसके लिए फ़ोकस किए गए एलिमेंट को फ़ॉर्म कंट्रोल (जैसे कि textarea एलिमेंट) होना चाहिए या उसे एडिटिंग होस्ट होना चाहिए. जैसे, contenteditable एट्रिब्यूट का इस्तेमाल करके. यह तरीका हमेशा undefined दिखाता है, लेकिन अगर वर्चुअल कीबोर्ड पहले नहीं दिखाया गया है, तो यह geometrychange इवेंट ट्रिगर करता है.

navigator.virtualKeyboard.show();

वर्चुअल कीबोर्ड छिपाने के लिए, hide() वाले तरीके को कॉल करें. इस तरीके से हमेशा undefined दिखता है. हालांकि, अगर वर्चुअल कीबोर्ड पहले दिखाया गया है, तो यह geometrychange इवेंट को ट्रिगर करता है.

navigator.virtualKeyboard.hide();

वर्तमान ज्यामिति प्राप्त करना

boundingRect प्रॉपर्टी को देखकर, वर्चुअल कीबोर्ड की मौजूदा ज्यामिति के बारे में जाना जा सकता है. यह वर्चुअल कीबोर्ड के मौजूदा डाइमेंशन को DOMRect ऑब्जेक्ट के तौर पर दिखाता है. इनसेट में ऊपर, दाईं ओर, सबसे नीचे, और/या बाएं प्रॉपर्टी को दिखाया जाता है.

const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);

ज्यामिति में होने वाले बदलावों के बारे में जानकारी पाना

जब भी वर्चुअल कीबोर्ड दिखता है या गायब हो जाता है, तो geometrychange इवेंट भेज दिया जाता है. इवेंट की target प्रॉपर्टी में, virtualKeyboard ऑब्जेक्ट शामिल है. जैसा कि ऊपर बताया गया है, इसमें वर्चुअल कीबोर्ड इनसेट की नई ज्यामिति, DOMRect के तौर पर शामिल है.

navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
  const { x, y, width, height } = event.target.boundingRect;
  console.log('Virtual keyboard geometry changed:', x, y, width, height);
});

सीएसएस एनवायरमेंट वैरिएबल

वर्चुअल कीबोर्ड एपीआई, सीएसएस एनवायरमेंट वैरिएबल का एक सेट दिखाता है. इससे यह जानकारी मिलती है कि वर्चुअल कीबोर्ड कैसा दिखेगा. इन्हें inset सीएसएस प्रॉपर्टी की तरह ही मॉडल किया जाता है. इसका मतलब है ऊपर, दाईं, नीचे, और/या बाईं प्रॉपर्टी के हिसाब से.

• keyboard-inset-top
• keyboard-inset-right
• keyboard-inset-bottom
• keyboard-inset-left
• keyboard-inset-width
• keyboard-inset-height

वर्चुअल कीबोर्ड इनसेट में छह एनवायरमेंट वैरिएबल होते हैं. ये एक रेक्टैंगल के ऊपर, दाएं, नीचे, और बाएं इनसेट को व्यूपोर्ट के किनारे से तय करते हैं. चौड़ाई और ऊंचाई इनसेट की गणना डेवलपर अर्गोनॉमिक्स के अन्य इनसेट से की जाती है. अगर फ़ॉलबैक वैल्यू नहीं दी गई है, तो कीबोर्ड के हर इनसेट की डिफ़ॉल्ट वैल्यू 0px होगी.

आम तौर पर, नीचे दिए गए उदाहरण की तरह एनवायरमेंट वैरिएबल का इस्तेमाल किया जाएगा:

.some-class {
  /**
   * Use a margin that corresponds to the virtual keyboard's height
   * if the virtual keyboard is shown, else use the fallback value of `50px`.
   */
  margin-block-end: env(keyboard-inset-height, 50px);
}

.some-other-class {
  /**
   * Use a margin that corresponds to the virtual keyboard's height
   * if the virtual keyboard is shown, else use the default fallback value of `0px`.
   */
  margin-block-end: env(keyboard-inset-height);
}

वर्चुअल कीबोर्ड की नीति

कभी-कभी किसी बदलाव करने लायक एलिमेंट पर फ़ोकस होने पर, वर्चुअल कीबोर्ड नहीं दिखना चाहिए. उदाहरण के लिए, ऐसा स्प्रेडशीट ऐप्लिकेशन जहां उपयोगकर्ता, सेल पर टैप करके उसकी वैल्यू को दूसरे सेल के फ़ॉर्मूला में शामिल कर सकता है. virtualkeyboardpolicy एक ऐसा एट्रिब्यूट है जिसके कीवर्ड, auto और manual स्ट्रिंग होते हैं. contenteditable होस्ट वाले एलिमेंट पर बताए जाने पर, auto फ़ोकस या टैप किए जाने पर, उससे जुड़े बदलाव करने लायक एलिमेंट को वर्चुअल कीबोर्ड में अपने-आप दिखाता है. साथ ही, manual वर्चुअल कीबोर्ड की मौजूदा स्थिति में बदलावों से फ़ोकस और बदलाव किए जा सकने वाले एलिमेंट को अलग करता है और उस पर टैप करता है.

<!-- Do nothing on regular focus, but show the virtual keyboard on double-click. -->
<div
  contenteditable
  virtualkeyboardpolicy="manual"
  inputmode="text"
  ondblclick="navigator.virtualKeyboard.show();"
>
  Double-click to edit.
</div>

डेमो

आप Glitch पर, डेमो में, Virtualकीबोर्ड API को काम करता हुआ देख सकते हैं. सोर्स कोड को एक्सप्लोर करके देखें कि इसे कैसे लागू किया गया है. हालांकि, iframe एम्बेड में geometrychange इवेंट देखे जा सकते हैं, लेकिन असल में वर्चुअल कीबोर्ड के इस्तेमाल के लिए, डेमो को अपने ब्राउज़र टैब में खोलने की ज़रूरत होती है.

काम के कुछ लिंक

• खास जानकारी
• डेटा स्टोर करने की जगह
• ChromeStatus एंट्री
• Chromium की गड़बड़ी
• W3C TAG की समीक्षा
• Mozilla के स्टैंडर्ड के लिए पोज़िशन का अनुरोध करना
• WebKit के मानकों के हिसाब से पोज़िशन का अनुरोध करना

स्वीकार हैं

वर्चुअल कीबोर्ड API (एपीआई) को Microsoft के अनुपम स्निग्धा ने तय किया था. इसे बनाने के लिए Microsoft ने पहले संपादक ग्रिशा लुलुकिन का योगदान दिया था. Unsplash पर @freestocks की अपलोड की गई हीरो इमेज.