अवलोकन
क्लिपबोर्ड पर प्रतिलिपि बनाने के लिए तीन प्राथमिक ब्राउज़र API हैं:
- Async क्लिपबोर्ड API
[navigator.clipboard.writeText]
- Chrome 66 (मार्च 2018) में उपलब्ध टेक्स्ट-केंद्रित भाग
- एक्सेस अतुल्यकालिक है और जावास्क्रिप्ट प्रोमिस का उपयोग करता है , इसलिए लिखा जा सकता है ताकि सुरक्षा उपयोगकर्ता संकेत (यदि प्रदर्शित हो) पेज में जावास्क्रिप्ट को बाधित न करें।
- पाठ को एक चर से सीधे क्लिपबोर्ड पर कॉपी किया जा सकता है।
- केवल HTTPS से अधिक पृष्ठों पर समर्थित।
- Chrome में सक्रिय टैब के 66 पृष्ठ बिना अनुमति के क्लिपबोर्ड पर लिख सकते हैं।
document.execCommand('copy')
- अधिकांश ब्राउज़र इसे ~ अप्रैल 2015 तक समर्थन करते हैं (नीचे ब्राउज़र समर्थन देखें)।
- एक्सेस सिंक्रोनस है, यानी पृष्ठ में जावास्क्रिप्ट को तब तक बंद किया जाता है जब तक कि प्रदर्शन और उपयोगकर्ता किसी भी सुरक्षा संकेतों के साथ बातचीत नहीं करते।
- डोम से पाठ पढ़ा जाता है और क्लिपबोर्ड पर रखा जाता है।
- परीक्षण के दौरान ~ अप्रैल 2015 में केवल इंटरनेट एक्सप्लोरर को क्लिपबोर्ड पर लिखने के दौरान अनुमतियों को प्रदर्शित करने के रूप में नोट किया गया था।
- कॉपी ईवेंट को ओवरराइड करना
- कॉपी इवेंट को ओवरराइड करने पर क्लिपबोर्ड एपीआई प्रलेखन देखें ।
- आपको किसी भी कॉपी ईवेंट से क्लिपबोर्ड पर दिखाई देने वाले बदलाव को संशोधित करने की अनुमति देता है, इसमें सादे पाठ के अलावा अन्य डेटा के अन्य प्रारूप शामिल हो सकते हैं।
- यहाँ कवर नहीं है क्योंकि यह सीधे सवाल का जवाब नहीं देता है।
सामान्य विकास नोट
जब आप कंसोल में कोड का परीक्षण कर रहे हों, तो क्लिपबोर्ड से संबंधित कार्य करने की अपेक्षा न करें। आम तौर पर पृष्ठ को सक्रिय करने की आवश्यकता होती है (Async क्लिपबोर्ड API) या document.execCommand('copy')अधिक विस्तार के लिए नीचे दिए गए क्लिपबोर्ड को देखने की अनुमति देने के लिए उपयोगकर्ता इंटरैक्शन (उदाहरण के लिए उपयोगकर्ता क्लिक) की आवश्यकता होती है।
महत्वपूर्ण (यहां 2020/02/20 नोट)
ध्यान दें कि चूंकि यह पोस्ट मूल रूप से क्रॉस-मूल IFRAME और अन्य IFRAME "सैंडबॉक्सिंग " में अनुमतियों का पदावनति लिखी गई थी, जो एम्बेडेड डेमो "रन कोड स्निपेट" बटन और "कोडपेन.आईओ उदाहरण" को कुछ ब्राउज़रों में काम करने से रोकती है (क्रोम और Microsoft एज सहित) )।
अपना खुद का वेब पेज बनाने के लिए, उस पेज को एचटीटीपीएस कनेक्शन पर परीक्षण करें और उसके खिलाफ विकसित करें।
यहाँ एक परीक्षण / डेमो पृष्ठ है जो काम करने वाले कोड को प्रदर्शित करता है:
https://deanmarktaylor.github.io/clipboard-Eest/
Async + फ़ॉलबैक
नए Async क्लिपबोर्ड एपीआई के लिए ब्राउज़र समर्थन के स्तर के कारण आप संभवतः document.execCommand('copy')अच्छा ब्राउज़र कवरेज प्राप्त करने के लिए विधि में वापसी करना चाहेंगे ।
यहां एक सरल उदाहरण है (इस साइट में एम्बेडेड काम नहीं कर सकता है, ऊपर "महत्वपूर्ण" नोट पढ़ें):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
(codepen.io उदाहरण काम नहीं कर सकता है, "महत्वपूर्ण" नोट ऊपर पढ़ें) ध्यान दें कि यह स्निपेट स्टैक ओवरफ्लो के एम्बेडेड पूर्वावलोकन में अच्छी तरह से काम नहीं कर रहा है आप इसे यहाँ आज़मा सकते हैं: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
Async क्लिपबोर्ड API
ध्यान दें कि Chrome 66 में अनुमतियों एपीआई के माध्यम से क्लिपबोर्ड तक पहुंच के लिए "अनुमति का अनुरोध" करने और परीक्षण करने की क्षमता है।
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
document.execCommand ( 'प्रतिलिपि')
इस पोस्ट की शेष राशि document.execCommand('copy')एपीआई की बारीकियों और विस्तार में जाती है।
ब्राउज़र का समर्थन
जावास्क्रिप्ट document.execCommand('copy')समर्थन बड़ा हो गया है, ब्राउज़र अपडेट के लिए नीचे दिए गए लिंक देखें:
सरल उदाहरण
(इस साइट में एम्बेड किए गए कार्य नहीं हो सकते हैं, ऊपर "महत्वपूर्ण" नोट पढ़ें)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
जटिल उदाहरण: इनपुट प्रदर्शित किए बिना क्लिपबोर्ड पर कॉपी करें
यदि स्क्रीन पर कोई तत्व textareaया inputतत्व दिखाई दे रहा है, तो उपरोक्त सरल उदाहरण बहुत अच्छा काम करता है ।
कुछ मामलों में आप एक input/ textareaतत्व प्रदर्शित किए बिना पाठ को क्लिपबोर्ड पर कॉपी करना चाह सकते हैं । यह इसके चारों ओर काम करने के तरीके का एक उदाहरण है (मूल रूप से तत्व सम्मिलित करें, क्लिपबोर्ड पर कॉपी करें, तत्व निकालें):
Google Chrome 44, फ़ायरफ़ॉक्स 42.0a1 और इंटरनेट एक्सप्लोरर 11.0.8600.17814 के साथ परीक्षण किया गया।
(इस साइट में एम्बेड किए गए कार्य नहीं हो सकते हैं, ऊपर "महत्वपूर्ण" नोट पढ़ें)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
अतिरिक्त नोट्स
केवल तभी काम करता है जब उपयोगकर्ता कोई कार्रवाई करता है
सभी document.execCommand('copy')कॉल उपयोगकर्ता कार्रवाई के प्रत्यक्ष परिणाम के रूप में होनी चाहिए, उदाहरण के लिए ईवेंट हैंडलर पर क्लिक करें। यह उपयोगकर्ता के क्लिपबोर्ड के साथ खिलवाड़ रोकने के लिए एक उपाय है जब वे इसकी उम्मीद नहीं करते हैं।
अधिक जानकारी के लिए यहां Google डेवलपर्स पोस्ट देखें ।
क्लिपबोर्ड एपीआई
नोट पूरा क्लिपबोर्ड एपीआई मसौदा विनिर्देश यहां पाया जा सकता है:
https://w3c.github.io/clipboard-apis/
क्या यह समर्थित है?
document.queryCommandSupported('copy')trueयदि कमांड "ब्राउज़र द्वारा समर्थित है" वापस लौटना चाहिए ।- और अगर अब सफल हुआ तो
document.queryCommandEnabled('copy')वापसी करेंगे। यह सुनिश्चित करने के लिए कि उपयोगकर्ता द्वारा शुरू किए गए थ्रेड से कमांड को बुलाया गया है और अन्य आवश्यकताओं को पूरा किया गया है।truedocument.execCommand('copy')
हालांकि ब्राउज़र संगतता मुद्दों, ~ अप्रैल से ~ अक्टूबर 2015 तक गूगल क्रोम केवल लौटे का एक उदाहरण के रूप में trueसे document.queryCommandSupported('copy')अगर आदेश जो उपयोगकर्ता द्वारा आरंभ धागे से बुलाया गया था।
नोट संगतता विवरण नीचे।
ब्राउज़र संगतता विवरण
एक यूजर क्लिक के परिणामस्वरूप / ब्लॉक document.execCommand('copy')में लिपटे एक साधारण कॉल के दौरान, आपको सबसे अनुकूलता का उपयोग करने के लिए मिलेगा, जिसमें कुछ प्रोविडेंस हैं:trycatch
किसी भी कॉल document.execCommand, document.queryCommandSupportedया document.queryCommandEnabledको try/ catchब्लॉक में लपेटा जाना चाहिए ।
अलग-अलग ब्राउज़र कार्यान्वयन और ब्राउज़र संस्करण विभिन्न प्रकार के अपवादों को फेंकते हैं जब लौटने के बजाय कहा जाता है false।
विभिन्न ब्राउज़र कार्यान्वयन अभी भी प्रवाह में हैं और क्लिपबोर्ड एपीआई अभी भी मसौदे में है, इसलिए अपने परीक्षण करना याद रखें।