JavaScript Clipboard API – সম্পূর্ণ বাংলা পরিচিতি
Clipboard API ব্যবহার করে আপনি ইউজারের ক্লিপবোর্ড (copy/paste buffer) থেকে data copy এবং data paste করতে পারবেন। এটি বিশেষ করে ফর্ম, ইউজার অ্যাকশন, অথবা ইউজার ইন্টারঅ্যাকশনসমূহের জন্য খুবই দরকারি ও কার্যকর।
Clipboard API এর দুটি মূল Method:
navigator.clipboard.writeText(text)→ ক্লিপবোর্ডে টেক্সট কপি করার জন্য।navigator.clipboard.readText()→ ক্লিপবোর্ড থেকে টেক্সট পেস্ট করার জন্য।
নোট: Clipboard API শুধুমাত্র HTTPS বা localhost এর মধ্যে কাজ করে, এবং সাধারণত user interaction (যেমন click) ছাড়া কাজ করবে না।
✂️ উদাহরণ ১: ক্লিপবোর্ডে লেখা কপি করুন
একটি বাটনে ক্লিক করে কিভাবে টেক্সট কপি করবেন নিচে দেখুন:
<input type="text" id="copyText" value="Hello Clipboard!">
<button onclick="copyToClipboard()">Copy Text</button>
<script>
function copyToClipboard() {
var text = document.getElementById("copyText").value;
navigator.clipboard.writeText(text)
.then(() => {
alert("টেক্সট কপি হয়েছে: " + text);
})
.catch(err => {
console.error('কপি করতে সমস্যা:', err);
});
}
</script>
ব্যাখ্যা: এখানে আমরা ইনপুট ফিল্ড থেকে লেখা নিয়ে Clipboard API-এর writeText() ব্যবহার করে কপি করেছি। সফল হলে ইউজারকে alert দেখানো হচ্ছে।
উদাহরণ ২: ক্লিপবোর্ড থেকে লেখা পড়ুন
এখন আমরা ক্লিপবোর্ড থেকে টেক্সট রিড করে কিভাবে ইনপুট বক্সে সেট করব তা দেখুন:
<input type="text" id="pasteText" placeholder="Paste will appear here">
<button onclick="pasteFromClipboard()">Paste Text</button>
<script>
function pasteFromClipboard() {
navigator.clipboard.readText()
.then(text => {
document.getElementById("pasteText").value = text;
alert("পেস্ট করা টেক্সট: " + text);
})
.catch(err => {
console.error('পেস্ট করতে সমস্যা:', err);
});
}
</script>
ব্যাখ্যা: এখানে readText() ব্যবহার করে Clipboard থেকে ডেটা রিড করে ইনপুট ফিল্ডে সেট করা হয়েছে।
নিরাপত্তা বিষয়ক গুরুত্বপূর্ণ বিষয়
- Clipboard API শুধুমাত্র HTTPS বা localhost-এ কাজ করে
- অনুমতি না থাকলে clipboard অ্যাক্সেস হবে না
- Paste/Copy ফাংশন ইউজারের action এর (যেমন click) মাধ্যমে হওয়া উচিত
Clipboard API এর permission চেক
আপনি চাইলে ব্যবহারকারী কি ক্লিপবোর্ড অ্যাক্সেস অনুমতি দিয়েছে কিনা তা চেক করতে পারেন:
navigator.permissions.query({ name: "clipboard-read" })
.then(result => {
if (result.state === "granted" || result.state === "prompt") {
console.log("Paste permission available");
}
});
ব্যাখ্যা: এই কোড ব্লকটি permission API দিয়ে চেক করে Clipboard API read permission আছে কিনা।
উপসংহার
Clipboard API আপনাকে ইউজারের ব্রাউজারে আরও ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি ফিচার বানাতে সাহায্য করে। কপি/পেস্ট সহজ করে দেয়ার মাধ্যমে আপনি ইউজার এক্সপেরিয়েন্স অনেক উন্নত করতে পারেন। এটি সঠিকভাবে ব্যবহার করার জন্য অবশ্যই user interaction ও HTTPS পরিবেশ নিশ্চিত করতে হবে।