ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
टैबलेट या सेलफ़ोन जैसे डिवाइसों में आम तौर पर, टेक्स्ट टाइप करने के लिए वर्चुअल कीबोर्ड होता है.
वर्चुअल कीबोर्ड हमेशा मौजूद रहता है और हमेशा एक जैसा रहता है. जबकि, इसमें वर्चुअल कीबोर्ड ही दिखता है
और गायब हो जाता है, जो उपयोगकर्ता की गतिविधियों पर निर्भर करता है और इसके लिए वह डायनैमिक तौर पर भी अपने हिसाब से काम कर सकता है.
उदाहरण के लिए,
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
इवेंट को देखा जा सकता है, असल वर्चुअल कीबोर्ड
व्यवहार के लिए डेमो को उसके ब्राउज़र टैब में खोलने की ज़रूरत होती है.
काम के लिंक
- खास जानकारी
- डेटा स्टोर करने की जगह
- ChromeStatus की एंट्री
- Chromium की गड़बड़ी
- W3C TAG की समीक्षा
- Mozilla के स्टैंडर्ड की जगह के लिए अनुरोध
- WebKit के मानकों के हिसाब से पोज़िशन का अनुरोध
स्वीकार की गई
वर्चुअल कीबोर्ड एपीआई को Microsoft के अनुपम स्निग्धा ने उपलब्ध कराया था. इसमें उन्होंने की एडिटर, ग्रीशा ल्यूशिन, और Microsoft फ़ाइलें भी हैं. इन्होंने हीरो इमेज दी है @freestocks पर अनस्प्लैश.