JavaScript navigator.clipboard – বাংলা টিউটোরিয়াল
navigator.clipboard একটি Web API যা আপনাকে ব্যবহারকারীর ক্লিপবোর্ডে লেখা কপি বা ক্লিপবোর্ড থেকে লেখা পেস্ট করতে দেয়। এটি সাধারণত secure context (HTTPS) ও user interaction এর মধ্যেই কাজ করে। নিচে আমরা এই API এর মাধ্যমে কিভাবে ক্লিপবোর্ডে ডেটা কপি ও পেস্ট করতে পারি, তার বিস্তারিত উদাহরণ ও ব্যাখ্যা দেখবো।
উদাহরণ ১: ক্লিপবোর্ডে লেখা কপি করা
<input type="text" id="copyText" value="Hello from JavaScript Clipboard!" style="padding:8px;">
<button onclick="copyText()" style="padding:8px 15px; margin-left:10px;">কপি করুন</button>
<script>
function copyText() {
const text = document.getElementById("copyText").value;
navigator.clipboard.writeText(text).then(function() {
alert("ক্লিপবোর্ডে কপি হয়েছে: " + text);
}).catch(function(err) {
alert("কপি করা যায়নি: " + err);
});
}
</script>
ব্যাখ্যা: এখানে একটি <input> ফিল্ড থেকে ভ্যালু নিয়ে navigator.clipboard.writeText() এর মাধ্যমে সেটি ক্লিপবোর্ডে কপি করা হয়েছে। .then() ব্যবহার করে সফল হলে মেসেজ দেখানো হয় এবং .catch() ব্যবহার করে ভুল হলে সেটি হ্যান্ডেল করা হয়।
উদাহরণ ২: ক্লিপবোর্ড থেকে লেখা পড়া (Paste)
<button onclick="pasteText()" style="padding:8px 15px;">ক্লিপবোর্ড থেকে পেস্ট করুন</button>
<p id="output" style="margin-top:10px; font-weight:bold;"></p>
<script>
function pasteText() {
navigator.clipboard.readText().then(function(text) {
document.getElementById("output").innerText = "ক্লিপবোর্ড থেকে পড়া হয়েছে: " + text;
}).catch(function(err) {
document.getElementById("output").innerText = "পেস্ট সম্ভব হয়নি: " + err;
});
}
</script>
ব্যাখ্যা: এখানে navigator.clipboard.readText() ব্যবহার করে ইউজারের ক্লিপবোর্ড থেকে লেখা পড়া হয়েছে। এটি সাধারণত ইউজারের অনুমতি ও HTTPS সাইটে কাজ করে।
⚙️ নিরাপত্তা ও সীমাবদ্ধতা
- HTTPS: clipboard API শুধুমাত্র secure origin (অর্থাৎ HTTPS) -এ কাজ করে।
- Permission: ইউজার থেকে অনুমতি না পেলে পেস্ট অপারেশন কাজ নাও করতে পারে।
- User Gesture: clipboard API ব্যবহার করার জন্য ইউজারের ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক) প্রয়োজন হয়।
উন্নত উদাহরণ: কপি + পেস্ট একসাথে
<input type="text" id="copyInput" placeholder="কিছু লিখুন..." style="padding:8px;">
<button onclick="copyInput()" style="padding:8px 12px; margin-left:10px;">Copy</button>
<button onclick="pasteInput()" style="padding:8px 12px;">Paste</button>
<script>
function copyInput() {
const text = document.getElementById("copyInput").value;
navigator.clipboard.writeText(text).then(() => {
alert("Text copied!");
});
}
function pasteInput() {
navigator.clipboard.readText().then((text) => {
document.getElementById("copyInput").value = text;
});
}
</script>
✅ এই কোডে আপনি ইনপুট ফিল্ডে লেখা কপি ও পেস্ট দুটোই করতে পারবেন। এটি একটি ইউজার-ফ্রেন্ডলি Clipboard টুল।
সংক্ষেপে মনে রাখুন
| মেথড | কাজ |
|---|---|
navigator.clipboard.writeText() |
ক্লিপবোর্ডে টেক্সট কপি করে। |
navigator.clipboard.readText() |
ক্লিপবোর্ড থেকে টেক্সট রিড করে। |