अद्यतन 2020 : इस समाधान का उपयोग करता है execCommand। हालाँकि यह सुविधा इस उत्तर को लिखने के समय ठीक थी, अब इसे अप्रचलित माना जाता है । यह अभी भी कई ब्राउज़रों पर काम करेगा, लेकिन इसका उपयोग हतोत्साहित किया जा सकता है क्योंकि समर्थन को गिरा दिया जा सकता है।
एक और गैर-फ्लैश तरीका है ( क्लिपबोर्ड एपीआई के अलावा jfriend00 के उत्तर में उल्लिखित )। आपको पाठ का चयन करने की आवश्यकता है और फिर क्लिपबोर्ड पर कॉपी करने के लिए कमांड निष्पादित करेंcopy जो भी पाठ वर्तमान में पृष्ठ पर चुना गया है।
उदाहरण के लिए, यह फ़ंक्शन क्लिपबोर्ड में पारित तत्व की सामग्री को कॉपी करेगा ( पॉइंटज़ेरोटो से टिप्पणियों में सुझाव के साथ अपडेट किया गया है ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
यह इस तरह काम करता है:
- एक अस्थायी रूप से छिपा हुआ पाठ क्षेत्र बनाता है।
- तत्व की सामग्री को उस पाठ क्षेत्र में कॉपी करता है।
- पाठ फ़ील्ड की सामग्री का चयन करता है।
- कमांड कॉपी को निष्पादित करता है जैसे
document.execCommand("copy"):।
- अस्थायी पाठ फ़ील्ड निकालता है।
आप यहां क्विक डेमो देख सकते हैं:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
मुख्य मुद्दा यह है कि सभी ब्राउज़र इस समय इस सुविधा का समर्थन नहीं करते हैं, लेकिन आप इसका उपयोग मुख्य लोगों में से कर सकते हैं:
- क्रोम 43
- इंटरनेट एक्सप्लोरर 10
- फ़ायरफ़ॉक्स 41
- सफ़ारी १०
अद्यतन 1: यह शुद्ध जावास्क्रिप्ट समाधान (कोई jQuery) के साथ भी प्राप्त किया जा सकता है:
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
ध्यान दें कि हम बिना # के आईडी पास करते हैं।
जैसा कि नीचे दिए गए टिप्पणियों में मडज़ोहन ने बताया, कुछ मामलों में Google क्रोम के 64-बिट संस्करण के साथ कुछ अजीब समस्या है (फ़ाइल को स्थानीय रूप से चलाना)। यह समस्या ऊपर के गैर-jQuery समाधान के साथ तय की गई लगती है।
मडज़ोहन ने सफारी में कोशिश की और समाधान ने काम किया लेकिन उपयोग document.execCommand('SelectAll')करने के बजाय .select()(जैसा कि चैट में और नीचे टिप्पणी में निर्दिष्ट किया गया है)।
जैसा कि पॉइंटजेरोव्यू टिप्पणियों में बताता है , कोड में सुधार किया जा सकता है ताकि यह एक सफलता / विफलता परिणाम लौटाए। आप इस jsFiddle पर एक डेमो देख सकते हैं ।
अद्यतन: कॉपी प्रारूप बनाने के बाद कॉपी करना
जैसा कि एक उपयोगकर्ता ने StackOverflow के स्पैनिश संस्करण में बताया है , ऊपर दिए गए समाधान पूरी तरह से काम करते हैं यदि आप किसी तत्व की सामग्री को शाब्दिक रूप से कॉपी करना चाहते हैं, लेकिन वे उस महान काम नहीं करते हैं यदि आप कॉपी किए गए पाठ को प्रारूप के साथ पेस्ट करना चाहते हैं (जैसा कि यह एक में कॉपी किया जाता है input type="text", प्रारूप "खो गया है")।
इसके लिए एक समाधान एक सामग्री संपादन योग्य में divकॉपी करना और फिर execCommandएक समान तरीके से उपयोग करके कॉपी करना होगा । यहाँ एक उदाहरण है - कॉपी बटन पर क्लिक करें और फिर नीचे सामग्री संपादन योग्य बॉक्स में पेस्ट करें:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
और jQuery में, यह इस तरह होगा:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>