ปิดการใช้งานคลิกขวา คัดลอก ตัดและวางโดยใช้ JavaScript

หากคุณมีเว็บไซต์และต้องการจำกัดไม่ให้ผู้ใช้ดูซอร์สโค้ดของหน้า คัดลอกเนื้อหาของหน้า หรือเพื่อสิ่งอื่น บล็อกนี้เขียนขึ้นสำหรับคุณ

ในบล็อกนี้ คุณจะได้เรียนรู้วิธีบล็อกผู้ใช้ไม่ให้ดำเนินการเหล่านี้โดยปิดการใช้งานการคลิกขวาของเมาส์และปุ่มลัดเช่น ctrl + c, ctrl + x, ctrl + u, ctrl + shift + i และ f12 โดยใช้ vanilla จาวาสคริปต์ (จริงๆแล้วไม่100%สำหรับขั้นเทพที่คัดลอกได้ปล่อยเค้าไป)

ทดสอบว่าโค้ดเหล่านี้จำกัดผู้ใช้ไม่ให้ดำเนินการดังกล่าวอย่างไร คุณสามารถสร้างไฟล์ index.html และวางซอร์สโค้ดที่กำหนดลงในไฟล์ของคุณ

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ปิดใช้งานการคัดลอกและวาง JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>พื้นที่นี้คือตัวอย่างทดสอบ ปิดการใช้งานคลิกขวา คัดลอก ตัดและวางโดยใช้ JavaScript.</p>
<script>
const disabledKeys = ["c", "C", "x", "J", "u", "I"]; // keys that will be disabled
const showAlert = e => {
e.preventDefault(); // preventing its default behaviour
return alert("ขออภัย คุณไม่สามารถดูหรือคัดลอกซอร์สโค้ดด้วยวิธีนี้ได้!");
}
document.addEventListener("contextmenu", e => {
showAlert(e); // calling showAlert() function on mouse right click
});
document.addEventListener("keydown", e => {
// calling showAlert() function, if the pressed key matched to disabled keys
if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
showAlert(e);
}
});
</script>
</body>
</html>

หากล่องโต้ตอบแสดงหลายครั้ง ผู้ใช้สามารถปิดและคัดลอกเนื้อหาของหน้าได้แต่ไม่สามารถดูซอร์สโค้ดของหน้าแนะนำให้ปิด alert("") ตัวอย่าง

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ปิดใช้งานการคัดลอกและวาง JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>พื้นที่นี้คือตัวอย่างทดสอบ ปิดการใช้งานคลิกขวา คัดลอก ตัดและวางโดยใช้ JavaScript.</p>
<script>
const disabledKeys = ["c", "C", "x", "J", "u", "I"]; // keys that will be disabled
const showAlert = e => {
e.preventDefault(); // preventing its default behaviour
return ;
}
document.addEventListener("contextmenu", e => {
showAlert(e); // calling showAlert() function on mouse right click
});
document.addEventListener("keydown", e => {
// calling showAlert() function, if the pressed key matched to disabled keys
if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
showAlert(e);
}
});
</script>
</body>
</html>

** JavaScript ในตัวอย่างเป็น CND หากยังไม่มีการทำงานของ JavaScript ลองปล่อยไว้ 1 วัน