জাভাস্ক্রিপ্ট দিয়ে টেক্সট ক্লিপবোর্ডে কপি কীভাবে করবেন?

Clipboard API: আধুনিক ও নিরাপদ পদ্ধতি

পুরানো `document.execCommand('copy')` ডিপ্রিকেটেড। আধুনিক ব্রাউজারগুলো **Clipboard API** (`navigator.clipboard`) সাপোর্ট করে যা Promise-বেসড, নিরাপদ এবং আরও শক্তিশালী।

বেসিক উদাহরণ (আধুনিক পদ্ধতি)

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>টেক্সট কপি টু ক্লিপবোর্ড</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 500px; margin: 0 auto; }
    .input-group { display: flex; gap: 10px; margin-bottom: 20px; }
    input { flex: 1; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 6px; }
    button { padding: 12px 24px; background: #4f46e5; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
    button:hover { background: #4338ca; }
    button:disabled { opacity: 0.6; cursor: not-allowed; }
    .toast { position: fixed; bottom: 20px; right: 20px; background: #1e293b; color: white; padding: 14px 20px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: none; animation: slideIn 0.3s ease; }
    .toast.show { display: block; }
    @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  </style>
</head>
<body>
  <h1>টেক্সট ক্লিপবোর্ডে কপি করুন</h1>
  <div class="input-group">
    <input type="text" id="textInput" value="হ্যালো ওয়ার্ল্ড! এটি একটি টেস্ট।" placeholder="লিখুন বা পেস্ট করুন...">
    <button id="copyBtn">কপি করুন</button>
  </div>
  <div class="toast" id="toast">কপি হয়েছে!</div>
  
  <script>
    const copyBtn = document.getElementById('copyBtn');
    const textInput = document.getElementById('textInput');
    const toast = document.getElementById('toast');
    
    copyBtn.addEventListener('click', async () => {
      const text = textInput.value.trim();
      if (!text) return showToast('কপি করার জন্য কিছু নেই!');
      
      try {
        // আধুনিক Clipboard API
        await navigator.clipboard.writeText(text);
        showToast('✅ টেক্সট ক্লিপবোর্ডে কপি হয়েছে!');
        textInput.select(); // ভিজ্যুয়াল ফিডব্যাক
      } catch (err) {
        console.error('Copy failed:', err);
        showToast('❌ কপি ব্যর্থ: ' + err.message);
        fallbackCopy(text); // ফলব্যাক
      }
    });
    
    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2500);
    }
    
    // ফলব্যাক: পুরানো পদ্ধতি (execCommand) - পুরানো ব্রাউজার/HTTP সাইটের জন্য
    function fallbackCopy(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed'; // স্ক্রল জাম্প এড়াতে
      textarea.style.opacity = '0';
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        showToast('✅ কপি হয়েছে (ফলব্যাক)');
      } catch (e) {
        showToast('❌ কপি সম্ভব নয়');
      }
      document.body.removeChild(textarea);
    }
    
    // কীবোর্ড শর্টকাট: Ctrl/Cmd + C তে ইনপুট সিলেক্ট থাকলে অটো কপি (ঐচ্ছিক)
    textInput.addEventListener('keydown', (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'c' && !textInput.value.trim()) {
        // ইনপুট খালি থাকলে কিছুই করবেন না
      }
    });
  </script>
</body>
</html>

Clipboard API-এর মূল মেথড

ব্রাউজার সাপোর্ট ও সীমাবদ্ধতা

• HTTPS আবশ্যক: Clipboard API শুধু সিকিউর কনটেক্সটে (HTTPS, localhost) কাজ করে। HTTP-এ কাজ করে না।
• ব্রাউজার: Chrome 66+, Firefox 63+, Safari 13.1+, Edge 79+।
• পারমিশন: `readText()`/`read()`-এ ব্যবহারকারীর অনুমতি চায় (پرমপ্ট আসে)। `writeText()`-এ সাধারণত পারমিশন লাগে না (user activation দরকার)۔
• User Activation: ক্লিক, কীপ্রেস ইত্যাদি ইউজার ইন্টারঅ্যাকশনের পরেই `writeText()` কাজ করে।

পুরানো পদ্ধতি (execCommand) — এখন বাঁচালে রাখা উচিত নয়

// পুরানো পদ্ধতি (ডিপ্রিকেটেড)
input.select();
input.setSelectionRange(0, 99999); // মোবাইল সাপোর্ট
document.execCommand('copy'); // বুলিয়ান রিটার্ন

এই পদ্ধতিটি আর রিকমেন্ড করা হয় না, কিন্তু কিছু পুরানো এন্টারপ্রাইজ এনভায়রনমেন্টে ফলব্যাক হিসেবে রাখা যেতে পারে।

অ্যাডভান্সড: রিচ টেক্সট (HTML) কপি

async function copyHtml(html) {
  try {
    const blob = new Blob([html], { type: 'text/html' });
    const data = [new ClipboardItem({ 'text/html': blob })];
    await navigator.clipboard.write(data);
    console.log('HTML কপি হয়েছে');
  } catch (err) {
    console.error(err);
  }
}

সারামারি

• নতুন প্রজেক্টে **Clipboard API (`navigator.clipboard.writeText`)** ব্যবহার করুন।
• HTTPS নিশ্চিত করুন।
• User activation (ক্লিক/কীপ্রেস) এর মধ্যে কল করুন।
• ত্রুটি হ্যান্ডলিং এবং ফলব্যাক রাখুন।
• UX-এ টোস্ট/নোটিফিকেশন এবং ইনপুট সিলেক্ট ভিজ্যুয়াল ফিডব্যাক দিন।