สอนเขียนสคริปต์jQuery ป้องกันการCopyข้อมูล
lเ |
ปัญหาอีกอย่างนึงของสคริปต์ JavaScript คือ การSupportกับBrowser ไม่ว่าจะเป็น Firefox,Chome,IE จะมีบางคำสั่งที่ไม่สามารถทำงานได้ครบทุกๆBrowser เนื่องจากBrowserแต่ละเจ้า ใช้เอนจินต์ของใครของมัน ไม่มีมาตรฐานที่แน่นอน ทำให้คำสั่ง JavaScript รวมถึงคำสั่ง CSS บางคำสั่ง รองรับเฉพาะบางBrowserเท่านั้นครับ
และสคริปต์ที่ผมจะสอนต่อไปนี้ ผมรับรองว่า Support กับทุกๆ Browser 100% ครับ
ฟังกชั่นป้องการการคลิกขวาเพื่อCopyข้อมูล พิมพ์Codeดังนี้ ไม่มีอะไรยุ่งยาก และSupportกับทุกๆBrowser
$.fn.notRightClick = function() {//ฟังก์ชั่นปิดการคลิกเมาส์ขวา
$(this).bind('contextmenu', function(e){
e.preventDefault();
return false;
});
};
ฟังก์ชั่นป้องการการCopyข้อมูล จากการDragเมาส์ไฮไลท์ตัวอักษรและกดCopyข้อมูล นอกจากนี้ ฟังก์ชั่นนี้ ยังสามารถป้องการกดปุ่ม CTRL+A (เลือกทั้งหมด) ได้อีกด้วย พิมพ์Codeดังนี้
$.fn.disableSelection = function() {//ฟังก์ชั่นปิดการCopyข้อมูล
return this.each(function() {
$(this).css({
'-moz-user-select':'none', //รองรับ firefox
'-webkit-user-select':'none', //รองรับ chome,safari browser อื่นๆ ที่ใช้เอนจิน webkit
'-ms-user-select':'none' //รองรับ IE
}).each(function() {
this.onselectstart = function() {
return false;
};
});
});
};
วิธีใช้งาน ให้เรียกใช้ฟังก์ชั่นหลังจากเว็บเพจใดๆถูกโหลดข้อมูลเรียบร้อยแล้ว เราจะใช้คำสั่งดังนี้
$(document).ready(function(){//วิธีเรียกใช้งานตอนเว็บเพจใดๆถูกโหลดเรียบร้อยแล้ว
$(this).notRightClick();//เรียกฟังก์ชั่นปิดการคลิกเมาส์ขวา
$('body').disableSelection();//เรียกฟังก์ชั่นปิดการCopyข้อมูล
});
นอกจากนี้เรายังสามารถกำหนดไม่ให้คลิกขวาหรือไม่ให้Copyข้อมูล เฉพาะบางส่วนในเว็บไซต์ของเราได้ เช่น
//ไม่ให้คลิกขวาเฉพาะ Attribute Class ชื่อ left_menu (เมนูด้านซ้าย)
$(‘.left_menu’).notRightClick();
// ไม่ให้Copyข้อมูลเฉพาะ Attribute Class ชื่อ content_center ส่วนอื่นๆ สามารถCopyข้อมูลได้ เป็นต้น
$('.content_center').disableSelection();
มาดูโค๊ดทั้งหมดกันเลยครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.fn.notRightClick = function() {//ฟังก์ชั่นปิดการคลิกเมาส์ขวา
$(this).bind('contextmenu', function(e){
e.preventDefault();
return false;
});
};
$.fn.disableSelection = function() {//ฟังก์ชั่นปิดการCopyข้อมูล
return this.each(function() {
$(this).css({
'-moz-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none'
}).each(function() {
this.onselectstart = function() {
return false;
};
});
});
};
$(document).ready(function(){//วิธีเรียกใช้งานตอนเว็บเพจใดๆโหลดเรียบร้อยแล้ว
$(this).notRightClick();//เรียกฟังก์ชั่นปิดการคลิกเมาส์ขวา
$('body').disableSelection();//เรียกฟังก์ชั่นปิดการCopyข้อมูล
});
</script>
</head>
<body>
<div> ลองCopyข้อความ หรือคลิกขวาดูสิ ไม่มีปัญญาทำได้หรอก 555+</div>
</body>
</html>
ความคิดเห็น
แสดงความคิดเห็น