আপডেট 2020 : এই সমাধানটি ব্যবহার করে execCommand। যদিও এই উত্তরটি লেখার মুহুর্তে সেই বৈশিষ্ট্যটি ঠিক ছিল, এখন এটি অপ্রচলিত হিসাবে বিবেচিত হয় । এটি এখনও অনেকগুলি ব্রাউজারে কাজ করবে তবে সমর্থন বাদ দেওয়া হওয়ায় এর ব্যবহার নিরুত্সাহিত করা হয়েছে।
আরও একটি নন-ফ্ল্যাশ উপায় রয়েছে ( jPress00 এর উত্তরে উল্লিখিত ক্লিপবোর্ড এপিআই ছাড়াও )। আপনাকে পাঠ্যটি নির্বাচন করতে হবে এবং তারপরে পৃষ্ঠায় বর্তমানে যে পাঠ্যটি নির্বাচিত হয়েছে তা ক্লিপবোর্ডে অনুলিপি করতে কমান্ডটি কার্যকর করতে হবে ।copy
উদাহরণস্বরূপ, এই ফাংশনটি উত্তীর্ণ উপাদানগুলির সামগ্রীটি ক্লিপবোর্ডে অনুলিপি করবে ( পয়েন্ট জিরোটো- র মন্তব্যগুলিতে পরামর্শের সাথে আপডেট হয়েছে ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
এটা এভাবে কাজ করে:
- একটি অস্থায়ীভাবে লুকানো পাঠ্য ক্ষেত্র তৈরি করে।
- উপাদানটির সামগ্রীটি সেই পাঠ্য ক্ষেত্রে অনুলিপি করে।
- পাঠ্য ক্ষেত্রের সামগ্রী নির্বাচন করে।
- মত কমান্ড কপি executes:
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
- সাফারি 10
আপডেট 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" />
লক্ষ্য করুন যে আমরা এখন # ছাড়াই আইডি পাস করি।
ম্যাডজোহান নীচের মন্তব্যে যেমন রিপোর্ট করেছেন, গুগল ক্রোমের cases৪- বিট সংস্করণ নিয়ে কিছু ক্ষেত্রে (স্থানীয়ভাবে ফাইল চালানো) কিছু অদ্ভুত সমস্যা রয়েছে। এই সমস্যাটি উপরের নন-জিক্যুরি সমাধানের সাথে স্থির হয়ে গেছে বলে মনে হচ্ছে।
ম্যাডজোহান সাফারিতে চেষ্টা করেছিলেন এবং সমাধানটি কাজ করেছে তবে ব্যবহারের document.execCommand('SelectAll')পরিবর্তে ব্যবহার করেছে .select()(চ্যাট এবং নীচের মন্তব্যে উল্লিখিত হিসাবে)।
পয়েন্টজিরোটো মন্তব্যগুলিতে যেমন উল্লেখ করেছে , কোডটি উন্নত হতে পারে তাই এটি সাফল্য / ব্যর্থতার ফলাফল ফিরিয়ে আনবে। আপনি এই jsFizz এ একটি ডেমো দেখতে পারেন ।
আপডেট: পাঠ্য ফর্ম্যাটটি কপি করুন
হচ্ছে একটি ব্যবহারকারী 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>