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

Thomas Steiner

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

  • 94
  • 94
  • x
  • x

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

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

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

पारंपरिक तरीका अपनाया है

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

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

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

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

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

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

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

Virtualकीबोर्ड 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>

डेमो

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

स्वीकार की गई

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