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>
ไม่มีความคิดเห็น :
แสดงความคิดเห็น