पब्लिश होने की तारीख: 23 सितंबर, 2025
clipboardchange इवेंट, Microsoft Edge टीम ने Chrome में जोड़ी है. इससे आपको पोलिंग की परफ़ॉर्मेंस पर असर डाले बिना, क्लिपबोर्ड में हुए बदलावों को आसानी से मॉनिटर करने में मदद मिलती है.
अब clipboardchange इवेंट को Chrome और Edge, दोनों में ऑरिजिन ट्रायल के साथ टेस्ट किया जा सकता है. इसके लिए, वर्शन 140 से शुरू करें.
इस नई सुविधा को टेस्ट करने के दौरान, हमें आपके सुझाव/राय का इंतज़ार रहेगा. इससे हमें इस सुविधा को बेहतर बनाने में मदद मिलेगी.
बदलावों का पता लगाने के लिए, क्लिपबोर्ड को पोल करने से जुड़ी समस्याएं
सिस्टम क्लिपबोर्ड में मौजूद कॉन्टेंट के बारे में जानने के लिए, आपको पोलिंग के ऐसे तरीकों का इस्तेमाल करना होगा जो असरदार नहीं हैं. उदाहरण के लिए, टेक्स्ट में बदलाव करने वाले वेब ऐप्लिकेशन, इस बात के आधार पर अलग-अलग "चिपकाएं" बटन चालू करना चाहें कि क्लिपबोर्ड में टेक्स्ट, इमेज या एचटीएमएल कॉन्टेंट है या नहीं.
इस सुविधा को चालू करने के लिए, आपको navigator.clipboard.read() तरीके को बार-बार कॉल करना होगा, ताकि क्लिपबोर्ड के कॉन्टेंट की जांच की जा सके. इसे यहां दिए गए कोड स्निपेट में दिखाया गया है:
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
हालांकि, इससे काम हो जाता है, लेकिन इसके कई नुकसान भी हैं.
परफ़ॉर्मेंस पर असर
क्लिपबोर्ड को लगातार पोल करने से, बेवजह ओवरहेड बनता है. navigator.clipboard.read() को कॉल करने के लिए, सिस्टम-लेवल पर क्लिपबोर्ड का ऐक्सेस ज़रूरी होता है. इससे आपके ऐप्लिकेशन की परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. खास तौर पर, उन डिवाइसों पर जिनमें संसाधन सीमित होते हैं. पोलिंग फ़्रीक्वेंसी, रिस्पॉन्स और परफ़ॉर्मेंस के बीच ट्रेड-ऑफ़ बन जाती है.
तेज़ी से बैटरी खर्च हुई
मोबाइल डिवाइसों पर, क्लिपबोर्ड को बार-बार पोल करने से बैटरी खत्म हो सकती है. ऐसा इसलिए होता है, क्योंकि ऐप्लिकेशन लगातार सिस्टम संसाधनों को ऐक्सेस करता रहता है. भले ही, उपयोगकर्ता कॉन्टेंट को कॉपी या चिपका न रहा हो.
उपयोगकर्ता अनुभव में अंतर
पोलिंग इंटरवल की वजह से, कॉन्टेंट कॉपी करने और क्लिपबोर्ड की नई स्थिति दिखाने के लिए यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के बीच में देरी होती है. ऐसा हो सकता है कि उपयोगकर्ताओं को, चिपकाने वाले बटन की पुरानी स्थितियां दिखें या कुछ समय के लिए सही विकल्प उपलब्ध न हों.
बार-बार पोल करने से जुड़ी निजता की समस्याएं
बार-बार क्लिपबोर्ड ऐक्सेस करने से निजता से जुड़ी समस्याएं हो सकती हैं. ऐसा इसलिए, क्योंकि ऐप्लिकेशन लगातार क्लिपबोर्ड डेटा को पढ़ते रहते हैं. भले ही, उसमें कोई बदलाव न हुआ हो. इससे उन लोगों को परेशानी हो सकती है जो क्लिपबोर्ड के कॉन्टेंट की निजता को लेकर काफ़ी संवेदनशील हैं.
clipboardchange इवेंट
इन चुनौतियों को हल करने के लिए, हमने clipboardchange नाम का एक नया इवेंट लागू किया है. साथ ही, Edge और Chrome, दोनों में ऑरिजिन ट्रायल लॉन्च किया है, ताकि आप इसे अपने ऐप्लिकेशन में टेस्ट कर सकें.
इस इवेंट की मदद से, वेब ऐप्लिकेशन क्लिपबोर्ड में हुए बदलावों पर तुरंत प्रतिक्रिया दे सकते हैं. इसके लिए, उन्हें बार-बार पोल करने की ज़रूरत नहीं होती. यह इवेंट तब अपने-आप ट्रिगर होता है, जब किसी ऐप्लिकेशन से कॉन्टेंट को क्लिपबोर्ड पर कॉपी या कट किया जाता है, क्लिपबोर्ड को मिटाया जाता है या कॉन्टेंट चिपकाया जाता है. कॉन्टेंट चिपकाने पर, कुछ मामलों में क्लिपबोर्ड मिट सकता है. यह इवेंट सिर्फ़ तब ट्रिगर होता है, जब दस्तावेज़ पर फ़ोकस किया जाता है.
clipboardchange इंटरफ़ेस पर लिसनर जोड़कर, clipboardchange इवेंट सुना जा सकता है. इसके लिए, यहां दिया गया तरीका अपनाएं:navigator.clipboard
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
मुख्य फ़ायदे
clipboardchange इवेंट के कई फ़ायदे हैं. जैसे:
- असरदार: इवेंट सिर्फ़ तब ट्रिगर होते हैं, जब बदलाव होते हैं.
- निजता बनाए रखने वाला: यह इवेंट सिर्फ़ नेटिव MIME टाइप को दिखाता है, न कि असली कॉन्टेंट को.
- अनुमति के लिए कोई प्रॉम्प्ट नहीं: कोई संवेदनशील डेटा ज़ाहिर नहीं किया जाता. इसलिए, उपयोगकर्ता की अनुमति की ज़रूरत नहीं होती.
- रीयल-टाइम में जवाब देने की सुविधा: क्लिपबोर्ड में मौजूद कॉन्टेंट में बदलाव होने पर, यूज़र इंटरफ़ेस (यूआई) तुरंत अपडेट हो जाता है.
- फ़ोकस-अवेयर: इवेंट सिर्फ़ तब ट्रिगर होते हैं, जब दस्तावेज़ पर फ़ोकस किया जाता है.
types प्रॉपर्टी
clipboardchange इवेंट ऑब्जेक्ट में types प्रॉपर्टी शामिल होती है. इसमें क्लिपबोर्ड में उपलब्ध MIME टाइप का कलेक्शन होता है:
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
फ़ोकस का व्यवहार
अगर दस्तावेज़ पर फ़ोकस न होने के दौरान क्लिपबोर्ड में बदलाव होते हैं, तो दस्तावेज़ पर सिस्टम का फ़ोकस वापस आने पर, एक clipboardchange इवेंट ट्रिगर होता है.
क्लिपबोर्ड में किए गए बदलावों का पुराना डेटा उपलब्ध नहीं होगा. पेज पर फ़ोकस किए जाने के दौरान उपलब्ध टाइप ही types सदस्य में शामिल किए जाएंगे.
आज ही clipboardchange इवेंट को टेस्ट करें
आज ही नए clipboardchange इवेंट को आज़माएं:
- सिर्फ़ अपने ब्राउज़र में इस सुविधा को चालू करके, स्थानीय तौर पर.
- इसके अलावा, प्रोडक्शन वेब ऐप्लिकेशन पर ओरिजिन ट्रायल के लिए रजिस्टर करके भी ऐसा किया जा सकता है.
बेहतर तरीके से काम करने के लिए, clipboardchange इवेंट का पता लगाएं
सबसे पहले, यह एक नई सुविधा है. इसलिए, इसका इस्तेमाल करने से पहले आपको यह पता लगाना होगा कि यह सुविधा आपके डिवाइस पर काम करती है या नहीं. इसके लिए, navigator.clipboard पर onclipboardchange प्रॉपर्टी की मौजूदगी की जांच करें. यहां दिखाया गया है कि इसे कैसे किया जा सकता है:
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
लोकल तौर पर टेस्ट करना
सिर्फ़ अपने ब्राउज़र में clipboardchange इवेंट की जांच करने के लिए:
about://flagsपेज खोलें.- फ़्लैग खोजें बॉक्स में
ClipboardChangeEventखोजें. - ड्रॉप-डाउन का इस्तेमाल करें और वैल्यू को डिफ़ॉल्ट से चालू है में बदलें.
- अपना ब्राउज़र रीस्टार्ट करें.
ओरिजिन ट्रायल के लिए साइन अप करना
अगर आपको अपनी साइट पर, असली उपयोगकर्ताओं के साथ clipboardchange इवेंट आज़माना है, तो Chrome या Edge में ऑरिजिन ट्रायल के लिए साइन अप करें.
ऑरिजिन ट्रायल, Chrome और Edge के वर्शन 140 से 142 के बीच चलेगा. यह 2 सितंबर, 2025 से 2 दिसंबर, 2025 के बीच चलेगा.
ऑरिजिन ट्रायल के बारे में ज़्यादा जानने और उन्हें शुरू करने का तरीका जानने के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करना लेख पढ़ें
डेमो
इवेंट को ऐक्शन में देखने के लिए, हमारा डेमो देखें. साथ ही, GitHub पर सोर्स कोड देखें.
इस डेमो में दिखाया गया है कि clipboardchange इवेंट का इस्तेमाल करके, रिस्पॉन्सिव पेस्ट इंटरफ़ेस कैसे बनाया जा सकता है. यह इंटरफ़ेस, क्लिपबोर्ड के कॉन्टेंट के आधार पर अपने-आप अपडेट होता है.
अलग-अलग तरह के कॉन्टेंट (टेक्स्ट, इमेज, एचटीएमएल) को कॉपी करके देखें. साथ ही, देखें कि बिना किसी पोलिंग के, रीयल-टाइम में चिपकाने वाले बटन कैसे चालू और बंद होते हैं!
सुझाव/राय दें या शिकायत करें
हमें यह जानकर खुशी होगी कि clipboardchange इवेंट, आपके इस्तेमाल के उदाहरणों के लिए कैसे काम करता है. W3C/clipboard-apis रिपॉज़िटरी में समस्या की शिकायत करके सुझाव/राय दें या शिकायत करें.
आपकी दिलचस्पी के बारे में सार्वजनिक तौर पर उपलब्ध जानकारी से हमें और अन्य ब्राउज़र को यह समझने में मदद मिलेगी कि यह सुविधा आपके लिए कितनी अहम है. इससे, स्टैंडर्ड तय करने की प्रोसेस के बारे में जानकारी मिल सकती है.
भले ही, इस इवेंट का इस्तेमाल प्रोग्रेसिव एन्हांसमेंट के तौर पर किया जा सकता है, लेकिन हम इसे Clipboard API स्पेसिफ़िकेशन के हिस्से के तौर पर स्टैंडर्ड बनाना चाहते हैं. साथ ही, हम चाहते हैं कि इसे सभी ब्राउज़र इस्तेमाल करें. फ़िलहाल, पोलिंग या क्लिपबोर्ड की निगरानी करने की अन्य तकनीकों का इस्तेमाल किया जा सकता है.