โค้ดป้องกันการคัดลอก
โค้ด JavaScript ห้ามคัดลอกข้อความบนเว็บไซต์ ห้ามคลิ๊กขวา ห้ามคลุมข้อความ หากคุณต้องการป้องกันไม่ให้ผู้ใช้คัดลอกหรือก๊อบปี้เนื้อหาบนเว็บไซต์ของคุณ สามารถใช้ JavaScript เพื่อป้องกันการลากคลุมข้อความ (Text Selection) และปิดการใช้งานคำสั่งคัดลอก (Copy) ได้ โดยสามารถใช้โค้ดต่อไปนี้:
1. ป้องกันการลากดำ + ห้าม Ctrl + A, C ในโค้ดเดียว
<script>
function disableselect(e) {
return false;
}
function reEnable() {
return true;
}
document.onselectstart = new Function ("return false");
if (window.sidebar) {
document.onmousedown = disableselect;
document.onclick = reEnable;
}
document.addEventListener("keydown", function (event) {
if (event.ctrlKey && (event.key === "a" || event.key === "c")) {
event.preventDefault();
alert("Sorry! This command cannot be used.");
}
});
</script>โค้ดนี้ใช้ JavaScript เพื่อป้องกันการเลือกข้อความและปิดการใช้คีย์ลัดบางอย่าง (เช่น Ctrl + A และ Ctrl + C) บนหน้าเว็บ โดยโค้ดทำงานดังนี้:
disableselect(e)→ ใช้คืนค่าfalseเพื่อป้องกันการเลือกข้อความreEnable()→ คืนค่าtrueเพื่อเปิดใช้งานการคลิกอีกครั้ง (ใช้ในบางเบราว์เซอร์เก่า)document.onselectstart→ เป็น Event Handler ที่รันเมื่อมีการเริ่มเลือกข้อความ (selectstart)new Function("return false")→ ปิดการเลือกข้อความโดยคืนค่าfalsewindow.sidebar→ ใช้ตรวจสอบว่าเบราว์เซอร์เป็น Firefox (เบราว์เซอร์เก่าของ Mozilla)document.onmousedown = disableselect;→ ปิดการเลือกข้อความเมื่อกดเมาส์document.onclick = reEnable;→ เปิดใช้งานการคลิก (เพื่อไม่ให้บล็อกทุกการคลิก)event.ctrlKey→ เช็คว่าปุ่มCtrlถูกกดอยู่หรือไม่event.key === "a"→ เช็คว่าผู้ใช้กดCtrl + A(เลือกทั้งหมด)event.key === "c"→ เช็คว่าผู้ใช้กดCtrl + C(คัดลอก)event.preventDefault();→ ปิดกั้นการทำงานของคีย์ลัดalert("Sorry! This command cannot be used.");→ แสดงข้อความแจ้งเตือน
2. ห้ามลาก-คลุมข้อความ
<script>
document.addEventListener("selectstart", function (event) {
let target = event.target;
// Disable text selection for other sections
event.preventDefault();
});
</script>ใช้ document.addEventListener(“selectstart”, function (event) {…})
- จับเหตุการณ์
"selectstart"ซึ่งเกิดขึ้นเมื่อผู้ใช้พยายามเลือกข้อความ event.preventDefault();→ ปิดการเลือกข้อความทั่วทั้งหน้าเว็บ
3. ห้ามคลุมข้อความและยกเว้นบางคลาส
<script>
document.addEventListener("selectstart", function (event) {
let target = event.target;
// Check if the target class starts with "wp-block-code".
while (target) {
if (target.classList && [...target.classList].some(cls => cls.startsWith("wp-block-code"))) {
return; // Allow text selection
}
target = target.parentElement;
}
// Disable text selection for other sections
event.preventDefault();
});
</script>จับเหตุการณ์ "selectstart"
- เกิดขึ้นเมื่อผู้ใช้พยายามลากเพื่อเลือกข้อความ
ตรวจสอบว่าผู้ใช้พยายามเลือกข้อความใน <pre class="wp-block-code"> หรือไม่
- ใช้
while (target)เพื่อตรวจสอบ element และ parent element - ถ้า
targetมีclassที่ ขึ้นต้นด้วย"wp-block-code"→ อนุญาตให้เลือกข้อความได้ - ใช้
target.classList.some(cls => cls.startsWith("wp-block-code"))เพื่อตรวจสอบ
ถ้าไม่ได้เลือกใน wp-block-code → ปิดการเลือกข้อความ
event.preventDefault();ปิดการเลือกข้อความทุกที่ ยกเว้นwp-block-code
4. โค้ดป้องกันการคัดลอกข้อความ (Copy) บนหน้าเว็บ
<script>
document.addEventListener('copy', function (e) {
e.preventDefault();
alert('Sorry! The content cannot be copied.');
});
</script>1️⃣ ดักจับเหตุการณ์ copy
- ใช้
document.addEventListener('copy', function (e) {...}) - เมื่อผู้ใช้กด
Ctrl + Cหรือคลิกขวาแล้วเลือก “คัดลอก” → ฟังก์ชันนี้จะทำงาน
2️⃣ e.preventDefault();
- ปิดกั้นการคัดลอก (
copy event) - ผู้ใช้จะ ไม่สามารถคัดลอกข้อความ ไปที่ clipboard ได้
3️⃣ แจ้งเตือน (alert(...))
- แสดงข้อความ
"Sorry! The content cannot be copied." - แจ้งให้ผู้ใช้รู้ว่าการคัดลอกถูกบล็อก
5. ปิดการใช้งานคลิกขวาพร้อมแจ้งเตือน (Disable Right Click)
<script>
var message = "Do not click right..!!";
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
alert(message);
});
</script>โค้ดนี้ทำหน้าที่ป้องกันการคลิกขวาบนหน้าเว็บโดยใช้ JavaScript ฟังก์ชันที่กำหนดจะตรวจจับเหตุการณ์การคลิกขวา (contextmenu event) และปิดกั้นไม่ให้เมนูคลิกขวาปรากฏขึ้นมา นอกจากนี้ยังแสดงกล่องแจ้งเตือน (alert) เพื่อแจ้งให้ผู้ใช้ทราบว่าการคลิกขวาถูกปิดกั้น ข้อความแจ้งเตือนถูกกำหนดไว้ล่วงหน้าในตัวแปร และจะแสดงขึ้นเมื่อมีการคลิกขวา
6. ปิดการใช้งานคลิกขวาโดยไม่แสดงข้อความแจ้งเตือน
<script>
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
});
</script>โค้ดนี้ใช้ JavaScript เพื่อปิดการใช้งานเมนูคลิกขวาบนหน้าเว็บ โดยการฟังเหตุการณ์ contextmenu ซึ่งจะเกิดขึ้นเมื่อผู้ใช้คลิกขวาบนเว็บเพจ แล้วใช้คำสั่ง e.preventDefault() เพื่อยับยั้งการแสดงเมนูคลิกขวาในเบราว์เซอร์.
- จับเหตุการณ์
contextmenu: เมื่อผู้ใช้คลิกขวาบนหน้าเว็บ e.preventDefault(): ปิดการแสดงเมนูคลิกขวาของเบราว์เซอร์, ซึ่งปกติจะช่วยให้ผู้ใช้สามารถเข้าถึงฟังก์ชันเช่น “คัดลอก”, “ดูแหล่งที่มา” เป็นต้น
ผลลัพธ์คือ ผู้ใช้จะไม่สามารถคลิกขวาได้ บนหน้าเว็บที่ใช้โค้ดนี้.
7. ใช้ CSS ป้องกันการคัดลอกข้อความ
/* Prevent text selection with CSS */
body {
user-select: none;
}โค้ดนี้ใช้ CSS เพื่อล็อกการเลือกข้อความบนหน้าเว็บ โดยการตั้งค่า user-select: none; ในสไตล์ของแท็ก <body>. การทำงานของโค้ดมีดังนี้:
ไม่สามารถลากเมาส์เพื่อเลือกข้อความได้
user-select: none;: ป้องกันไม่ให้ผู้ใช้เลือกข้อความบนหน้าเว็บ
ใช้กับแท็ก <body> ทำให้ข้อความทั้งหมดในหน้าถูกป้องกันจากการเลือก
8. ป้องกันการลากและวางข้อความ (Disable Drag & Drop)
โค้ดนี้ช่วยป้องกันการลากเนื้อหาหรือรูปภาพไปวางที่อื่น
<script>
document.addEventListener("dragstart", function (e) {
e.preventDefault();
});
document.addEventListener("drop", function (e) {
e.preventDefault();
});
</script>โค้ดนี้ใช้ JavaScript เพื่อป้องกันการลาก (drag) และการวาง (drop) บนหน้าเว็บ โดยจะใช้ preventDefault() เพื่อปิดการทำงานของทั้งสองเหตุการณ์
9. ปิดการใช้งาน Inspect Element และ View Source
ปิดการใช้งาน Ctrl + U (View Source), Ctrl + Shift + I (Developer Tools), F12 (DevTools)
<script>
document.addEventListener("keydown", function (e) {
if (e.ctrlKey && (e.key === "u" || e.key === "s" || e.key === "i" || e.key === "j")) {
e.preventDefault();
alert("Sorry! This command cannot be used.");
}
if (e.key === "F12") {
e.preventDefault();
alert("Developer tools are disabled");
}
});
</script>โค้ดนี้ใช้ JavaScript เพื่อป้องกันการใช้งานบางคำสั่งที่สามารถช่วยให้ผู้ใช้เข้าถึงเครื่องมือการพัฒนา (Developer Tools) และฟังก์ชันต่างๆ บนหน้าเว็บ เช่น การเปิด View Source, Inspect Element, หรือ Developer Tools ผ่านคีย์ลัดต่างๆ โดยทำการดักจับเหตุการณ์ keydown และป้องกันคำสั่งเหล่านั้นด้วย preventDefault().
การตรวจสอบ Ctrl + U, Ctrl + S, Ctrl + I, Ctrl + J:
ถ้าผู้ใช้กด Ctrl ค้างไว้และกด U, S, I, หรือ J (ซึ่งเป็นคีย์ลัดที่มักใช้ในการเปิดแหล่งที่มาของหน้าเว็บหรือเครื่องมือพัฒนา)
e.preventDefault()ปิดการใช้งานคำสั่งนี้- แสดงข้อความแจ้งเตือน:
"Sorry! This command cannot be used."
การตรวจสอบปุ่ม F12:
ถ้าผู้ใช้กด F12 ซึ่งเป็นคีย์ลัดสำหรับเปิด Developer Tools
e.preventDefault()ปิดการใช้งานการเปิด Developer Tools- แสดงข้อความแจ้งเตือน:
"Developer tools are disabled"
10. ปิดการใช้งานการเลือกข้อความแบบอัตโนมัติในเบราว์เซอร์
css Copy Edit/* Disable text selection and data dragging */
body, p, span, div {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}โค้ด CSS นี้ใช้เพื่อ ป้องกันการเลือกข้อความ (text selection) และการลากข้อมูล (dragging) บนหน้าเว็บ โดยการใช้ user-select: none; และการรองรับเบราว์เซอร์ที่แตกต่างกัน
รายละเอียดการทำงาน:
user-select: none;- ป้องกันไม่ให้ผู้ใช้สามารถเลือกข้อความใน HTML element ที่ถูกกำหนดไว้ (ในกรณีนี้คือ
body,p,span,div)
- ป้องกันไม่ให้ผู้ใช้สามารถเลือกข้อความใน HTML element ที่ถูกกำหนดไว้ (ในกรณีนี้คือ
-webkit-user-select: none;- ใช้สำหรับเบราว์เซอร์ที่ใช้ WebKit engine (เช่น Chrome, Safari)
- ช่วยให้สามารถป้องกันการเลือกข้อความในเบราว์เซอร์เหล่านี้ได้
-moz-user-select: none;- ใช้สำหรับ Firefox
- ป้องกันการเลือกข้อความใน Firefox
-ms-user-select: none;- ใช้สำหรับ Internet Explorer
- ป้องกันการเลือกข้อความใน IE
วิธีการใช้งาน ไปที่ส่วน header – ใส่โค้ดลงไปภายใน head
วิธีใส่โค้ดป้องกันการคัดลอก ลง WordPress
- ไปที่ส่วนจัดการ wordpress ของคุณ ไปที่เมนู Appearance/Theme File Editor
- ฝังขวามือ เลือกธีม(ที่คุณใช้อยู่ปัจจุบัน)
- หา ส่วนหัวธีม (header.php)
- วางโค้ดใน <head>
วิธีใส่โค้ดป้องกันการคัดลอก ลง Blogger
- ไปที่เมนู ธีม ของ Blogger
- คลิ๊กปุ่มเลื่อนลง แก้ไข HTML
- ใส่โค้ด ภายใน <head>
หมายเหตุ
แม้ว่าโค้ดเหล่านี้จะช่วยลดโอกาสการคัดลอกเนื้อหาบนเว็บไซต์ แต่ไม่สามารถป้องกันได้ 100% เนื่องจากผู้ใช้ยังสามารถใช้ Developer Tools หรือส่วนขยายของเบราว์เซอร์เพื่อเข้าถึงข้อมูลได้ ดังนั้น หากต้องการปกป้องเนื้อหาของคุณ ควรพิจารณาใช้มาตรการเพิ่มเติม เช่น การเพิ่มลายน้ำบนรูปภาพ หรือการใช้ระบบสมาชิกเพื่อจำกัดการเข้าถึงเนื้อหาสำคัญ
หวังว่าโค้ดเหล่านี้จะเป็นประโยชน์สำหรับการป้องกันการคัดลอกข้อความบนเว็บไซต์ของคุณ! 🚀
Thai 
English 
Japanese 
Korean 
German 
French 
Russian 
Spanish 
Chinese 
Hindi