অনেক সময় ব্লগাররা চান তাদের ওয়েবসাইটের কনটেন্ট সরাসরি কপি করা না যাক। কিন্তু কিছু সময় ব্যবহারকারী যদি কপি করার চেষ্টা করে, তখন আমরা চাই ডিফল্ট কোনো নির্দিষ্ট টেক্সট কপি হোক। এতে করে কনটেন্টের মালিকানা রক্ষা পায় এবং কপি প্রসেসে কিছু মেসেজ দেখানো যায়।
এই পোস্টে আমি দেখাবো কিভাবে JavaScript দিয়ে কপি ইভেন্ট কন্ট্রোল করা যায়, ডিফল্ট টেক্সট কপি করানো যায়, এবং কপি করার সময় সুন্দর একটি Toast মেসেজ দেখানো যায়।
কপি ব্লক কন্টেন্ট কপি প্রতিরোধ ও ডিফল্ট টেক্সট কপি করানো
নিচের স্ক্রিপ্টটি ব্রাউজারের copy ইভেন্ট হ্যান্ডেল করে। যখন কেউ ওয়েবসাইটের যেকোনো জায়গা থেকে কপি করার চেষ্টা করবে, আসল সিলেক্টেড টেক্সট কপি হবেনা , বরং আপনার দেওয়া ডিফল্ট টেক্সটটি কপি হবে।
document.addEventListener('copy', function(e) {
var defaultText = "© This content is protected. Visit our site for full details!";
e.clipboardData.setData('text/plain', defaultText);
e.preventDefault();
showCopyToast();
});এখানে e.preventDefault() দিয়ে ডিফল্ট কপি ইভেন্ট বন্ধ করে দেওয়া হয় এবং e.clipboardData.setData দিয়ে নির্দিষ্ট টেক্সট ক্লিপবোর্ডে সেট করা হয়।
কপি ইভেন্টে সুন্দর Toast মেসেজ দেখানো
ব্যবহারকারীকে জানাতে আমরা একটি ছোট পপআপ বা Toast মেসেজ দেখাবো যেটা নিচের অংশে এসে শো হবে এবং কয়েক সেকেন্ড পরে অটো লুকিয়ে যাবে। নিচে CSS এবং HTML সহ সেটাপ দেওয়া হলোঃ
CSS অংশ:
/* টেক্সট সিলেকশন কালার */
::selection {
background: #ff4747;
color: #ffffff;
}
::-moz-selection {
background: #ff4747;
color: #ffffff;
}
/* Premium Messenger Style Toast */
#copyToast {
visibility: hidden;
min-width: 280px;
background: linear-gradient(135deg, #0084ff, #00bfff);
color: #fff;
text-align: left;
border-radius: 12px;
padding: 14px 16px;
position: fixed;
z-index: 9999;
left: 50%;
bottom: 30px;
font-size: 15px;
font-family: "Segoe UI", sans-serif;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
opacity: 0;
transform: translateX(-50%) translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex;
align-items: center;
gap: 10px;
}
#copyToast.show {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#copyToast i {
font-size: 18px;
background: rgba(255,255,255,0.2);
padding: 6px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}HTML অংশ (যেখানে আপনার ওয়েবসাইটে থাকবে):
<!-- Toast HTML -->
<div id="copyToast">
<i class="fa fa-exclamation-circle"></i>
<span>Content copy is disabled! Default text copied.</span>
</div>
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">JavaScript এর মাধ্যমে Toast মেসেজ
// Toast দেখানোর ফাংশন
function showCopyToast() {
var toast = document.getElementById("copyToast");
toast.classList.add("show");
setTimeout(function(){
toast.classList.remove("show");
}, 2500);
}সম্পূর্ণ কোড একসাথে
নীচের ব্লকটি হল উপরের সবকিছুর পুরো combined কোড — আপনি চাইলে এটা সরাসরি আপনার সাইটে পেস্ট করে ব্যবহার করতে পারবেন (HTML view-এ পেস্ট করুন):
<!-- Selection color (optional) -->
<style>
/* টেক্সট সিলেকশন কালার */
::selection {
background: #ff4747;
color: #ffffff;
}
::-moz-selection {
background: #ff4747;
color: #ffffff;
}
/* Premium Messenger Style Toast */
#copyToast {
visibility: hidden;
min-width: 280px;
background: linear-gradient(135deg, #0084ff, #00bfff);
color: #fff;
text-align: left;
border-radius: 12px;
padding: 14px 16px;
position: fixed;
z-index: 9999;
left: 50%;
bottom: 30px;
font-size: 15px;
font-family: "Segoe UI", sans-serif;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
opacity: 0;
transform: translateX(-50%) translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex;
align-items: center;
gap: 10px;
}
#copyToast.show {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#copyToast i {
font-size: 18px;
background: rgba(255,255,255,0.2);
padding: 6px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<!-- Toast HTML -->
<div id="copyToast">
<i class="fa fa-exclamation-circle"></i>
<span>Content copy is disabled! Default text copied.</span>
</div>
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
// Copy ব্লক + Default Text
document.addEventListener('copy', function(e) {
var defaultText = "© This content is protected. Visit our site for full details!";
e.clipboardData.setData('text/plain', defaultText);
e.preventDefault();
showCopyToast();
});
// Toast দেখানোর ফাংশন
function showCopyToast() {
var toast = document.getElementById("copyToast");
toast.classList.add("show");
setTimeout(function(){
toast.classList.remove("show");
}, 2500);
}
</script>এই সিস্টেম দিয়ে আপনি আপনার ব্লগ বা ওয়েবসাইটের কন্টেন্টকে কপি থেকে প্রটেক্ট করতে পারবেন এবং ব্যবহারকারীদের কপি করার সময় ডিফল্ট টেক্সট কপি করিয়ে দিতে পারবেন। একই সাথে, ব্যবহারকারীকে সুন্দরভাবে জানাতে পারবেন যে কপি ব্লক করা হয়েছে এবং ডিফল্ট টেক্সট কপি হয়েছে। এটি আপনার কন্টেন্টের মালিকানা রক্ষায় সহায়ক।
যদি পোস্টের কোথাও বুঝতে সমস্যা হয় অবশ্যই কমেন্ট করে জানাবেন ধন্যবাদ।
