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

Thomas Steiner

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

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

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

ऐसी स्थितियों में, VirtualKeyboard API काम आता है. इसमें तीन हिस्से होते हैं:

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

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

VirtualKeyboard API, Chromium 94 से डेस्कटॉप और मोबाइल पर उपलब्ध है.

सुविधा की पहचान और ब्राउज़र के साथ काम करने की सुविधा

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

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

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

VirtualKeyboard 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 पर डेमो में, वर्चुअल कीबोर्ड एपीआई को काम करते हुए देखा जा सकता है. यह देखने के लिए कि इसे कैसे लागू किया गया है, सोर्स कोड को ज़रूर एक्सप्लोर करें. geometrychange इवेंट को iframe एम्बेड में देखा जा सकता है. हालांकि, वर्चुअल कीबोर्ड के असली व्यवहार को देखने के लिए, डेमो को अपने ब्राउज़र टैब में खोलना ज़रूरी है.

काम के लिंक

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

आभार

VirtualKeyboard API को Microsoft के अनुपम स्निग्धा ने बनाया था. इसमें Microsoft के पूर्व एडिटर ग्रिशा लुक्शिन का भी योगदान है.