সংক্ষিপ্ত বিবরণ
ক্লিপবোর্ডে অনুলিপি করার জন্য তিনটি প্রাথমিক ব্রাউজারের এপিআই রয়েছে:
- Async ক্লিপবোর্ড এপিআই
[navigator.clipboard.writeText]
- ক্রোম 66 (মার্চ 2018) এ পাঠ্য-কেন্দ্রিক অংশ উপলব্ধ
- অ্যাক্সেস অ্যাসিঙ্ক্রোনাস এবং জাভাস্ক্রিপ্ট প্রতিশ্রুতি ব্যবহার করে , এমনভাবে লেখা যেতে পারে যাতে সুরক্ষার ব্যবহারকারীদের অনুরোধ করা হয় (যদি প্রদর্শিত হয়) পৃষ্ঠাতে জাভাস্ক্রিপ্ট বাধা না দেয়।
- কোনও চলক থেকে সরাসরি ক্লিপবোর্ডে পাঠ্য অনুলিপি করা যায়।
- কেবল এইচটিটিপিএস-এ পরিবেশন করা পৃষ্ঠাগুলিতে সমর্থিত।
- ক্রোমে সক্রিয় ট্যাবগুলিতে 66 পৃষ্ঠাগুলি কোনও অনুমতি ছাড়াই ক্লিপবোর্ডে লিখতে পারে।
document.execCommand('copy')
- বেশিরভাগ ব্রাউজারগুলি এপ্রিল 2015-এ সমর্থন করে (নীচে ব্রাউজার সমর্থন দেখুন)।
- অ্যাক্সেস সিঙ্ক্রোনাস, অর্থাত্ কোনওরকম সুরক্ষা অনুরোধের সাথে ইন্টারফেস করা এবং ব্যবহারকারীর অন্তর্ভুক্ত হওয়া পর্যন্ত পৃষ্ঠাটিতে জাভাস্ক্রিপ্ট বন্ধ করে দেয়।
- পাঠ্যটি ডিওএম থেকে পড়ে এবং ক্লিপবোর্ডে রাখা হয়।
- পরীক্ষার সময় ~ এপ্রিল 2015 কেবলমাত্র ইন্টারনেট এক্সপ্লোরার ক্লিপবোর্ডে লেখার সময় অনুমতিগুলির অনুরোধ জানানো হিসাবে চিহ্নিত হয়েছিল।
- অনুলিপি ইভেন্টটি ওভাররাইড করা
- ক্লিপবোর্ডের এপিআই ডকুমেন্টেশনটি অনুলিপি ইভেন্টকে ওভাররাইড করার জন্য দেখুন ।
- যে কোনও অনুলিপি ইভেন্ট থেকে ক্লিপবোর্ডে যা প্রদর্শিত হবে তা সংশোধন করার অনুমতি দেয়, প্লেইন পাঠ্য ব্যতীত অন্য ফর্ম্যাটগুলিকে অন্তর্ভুক্ত করতে পারে।
- এটি সরাসরি প্রশ্নের উত্তর দেয় না বলে এখানে আচ্ছাদিত নয়।
সাধারণ উন্নয়ন নোট
আপনি কনসোলে কোড পরীক্ষা করছেন এমন সময় ক্লিপবোর্ড সম্পর্কিত কমান্ডগুলি কাজ করার আশা করবেন না। সাধারণত পৃষ্ঠার সক্রিয় হওয়া প্রয়োজন (অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই) বা document.execCommand('copy')ক্লিপবোর্ডে অ্যাক্সেসের জন্য ( ) ব্যবহারকারীর ইন্টারঅ্যাকশন প্রয়োজন (যেমন একটি ব্যবহারকারী ক্লিক) আরও বিশদের জন্য নীচে দেখুন।
গুরুত্বপূর্ণ (2020/02/20 এখানে উল্লিখিত)
নোট করুন যেহেতু এই পোস্টটি মূলত ক্রস-উত্সের আইএফআরএম এবং অন্যান্য আইএফআরএমে "স্যান্ডবক্সিং" এ এম্বেডড ডেমোগুলিকে "রান কোড স্নিপেট" বোতাম এবং "কোডেপেন.ইও উদাহরণ" কে কিছু ব্রাউজারে কাজ করা থেকে বিরত রেখেছে (ক্রোম এবং মাইক্রোসফ্ট এজ সহ) )।
আপনার নিজের ওয়েব পৃষ্ঠা তৈরি করতে বিকাশ করতে, সেই পৃষ্ঠাটি এইচটিটিপিএস সংযোগের মাধ্যমে পরীক্ষা করতে এবং এর বিরুদ্ধে বিকাশ করতে পরিবেশন করুন।
এখানে একটি পরীক্ষা / ডেমো পৃষ্ঠা যা কোডটি কাজ করে তা দেখায়:
https://deanmarktaylor.github.io/clipboard-test/
অ্যাসিঙ্ক + ফলব্যাক
নতুন অ্যাসিঙ্ক ক্লিপবোর্ড এপিআইয়ের জন্য ব্রাউজারের স্তরের স্তরের কারণে আপনি সম্ভবত 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>
(কোডেপেন.ও উদাহরণটি কাজ করতে পারে না, উপরে "গুরুত্বপূর্ণ" নোটটি পড়তে পারে) নোট করুন যে এই স্নিপেট স্ট্যাক ওভারফ্লো এর এম্বেড করা পূর্বরূপে ভাল কাজ করছে না আপনি এখানে চেষ্টা করে দেখতে পারেন: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
Async ক্লিপবোর্ড এপিআই
নোট করুন যে ক্রোম in 66 এর অনুমতিগুলি এপিআইয়ের মাধ্যমে ক্লিপবোর্ডে অ্যাক্সেসের জন্য "অনুমতি অনুরোধ করতে" এবং পরীক্ষা করার ক্ষমতা আছে an
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')API এর সংক্ষিপ্ত বিবরণ এবং বিশদে চলে যায় ।
ব্রাউজার সমর্থন
জাভাস্ক্রিপ্ট 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উপাদান প্রদর্শন না করে কপিরাইট অনুলিপি করতে পারেন । এটি এটিকে ঘিরে কাজ করার একটি উদাহরণ (মূলত উপাদান সন্নিবেশ করা, ক্লিপবোর্ডে অনুলিপি করা, উপাদান সরানো):
গুগল ক্রোম 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 বিকাশকারী পোস্টে আরও তথ্যের জন্য।
ক্লিপবোর্ড এপিআই
নোট করুন সম্পূর্ণ ক্লিপবোর্ডের API খসড়া স্পেসিফিকেশনটি এখানে পাওয়া যাবে:
https://w3c.github.io/clipboard-apis/
এটি কি সমর্থিত?
document.queryCommandSupported('copy')trueকমান্ডটি "ব্রাউজার দ্বারা সমর্থিত" হলে ফিরে আসা উচিত ।- এবং যদি এখন বলা হয় সফল হবে
document.queryCommandEnabled('copy')ফিরে । কমান্ডটি ব্যবহারকারী-সূচিত থ্রেড থেকে ডেকে আনা হয়েছে এবং অন্যান্য প্রয়োজনীয়তা পূরণ হয়েছে তা নিশ্চিত করার জন্য পরীক্ষা করা হচ্ছে।truedocument.execCommand('copy')
তবে ব্রাউজারের সামঞ্জস্যতা সমস্যার উদাহরণ হিসাবে, গুগল ক্রোম ~ এপ্রিল থেকে অক্টোবর 2015 পর্যন্ত কেবলমাত্র কমান্ডটি কোনও ব্যবহারকারী-সূচিত থ্রেড থেকে ডাকলে ফিরে আসে truefromdocument.queryCommandSupported('copy')
নীচে সামঞ্জস্যতা বিশদ নোট করুন।
ব্রাউজার সামঞ্জস্য বিশদ
একজন ব্যবহারকারী ক্লিকের ফলস্বরূপ বলা document.execCommand('copy')একটি try/ catchব্লকে মোড়ানো একটি সাধারণ কলটি আপনাকে সর্বাধিক সামঞ্জস্যতার সাথে ব্যবহার করবে নীচের কয়েকটি প্রোভিস রয়েছে:
যে কোনও কল document.execCommand, document.queryCommandSupportedবা document.queryCommandEnabledএকটি try/ catchব্লকে মোড়ানো উচিত ।
বিভিন্ন ব্রাউজার বাস্তবায়ন এবং ব্রাউজার সংস্করণগুলি ফিরে আসার পরিবর্তে কল করা হলে বিভিন্ন ধরণের ব্যতিক্রম ছুঁড়ে দেয় false।
বিভিন্ন ব্রাউজার বাস্তবায়ন এখনও ফ্লাক্সে রয়েছে এবং ক্লিপবোর্ডের এপিআই এখনও ড্রাফটে রয়েছে, তাই আপনার পরীক্ষাটি মনে রাখবেন।