| 測試環境 | |
| 測試瀏覽器 | Chrome36.0,Firefox31.0 |
相信很多朋友一定會有遇到過客戶要求不要讓人能夠複製網站資料
雖然這是一個很雞肋的功能，只能防君子不能防小人(
但是只少能夠讓客戶安心也是不錯的，本次主題將區分兩個區塊來說明
分別是「鎖滑鼠右鍵」及「防止整頁全選」來做說明
在開始進入主題之前我們先來建立要用到的HTML Code，請參考下面範例中的Code
<!DOCTYPE>
<html>
<head>
<title>鎖右鍵</title>
<style type="text/css">
/*等一下寫CSS的區塊*/
</style>
<script type="text/javascript">
/*等一下寫Js的區塊*/
</script>
</head>
<body>
Body中文字12346579
<input value="select">
<div>
Div區塊的文字內容
</div>
</body>
</html>
建立完成後就開始進入今天的主題吧~!
鎖滑鼠右鍵
鎖定滑鼠右鍵呢可以寫在CSS中，但是好像只有IE會有作用，基本上僅供參考
/*此段程式碼寫在上述的CSS區塊中*/
body{
/*將下面Code寫在要鎖定的區塊內*/
star:expression(document.oncontextmenu=function(){return false;});
}
因為僅供參考的關係，這邊就不多做介紹
接著介紹Js的寫法，請參考下面的Code
//此段程式寫在上述的Js區塊中
document.oncontextmenu=function(){return false;}
這種寫法經過小弟的測試，確定在IE、Chrome、Firefox上是有效的
學起來了嗎?快點去開個檔案試試看吧!!
防止整頁全選
整頁全選的話，可以參考以下做法
//此段程式寫在上述的Js區塊中
document.onselectstart=function(){event.returnValue=false}
加入了以後，使用者就無法全選頁面上任何的內容了，包含input中的內容都無法全選
若是要讓input中的內容可以全選，可以參考以下作法
<body onSelectStart="return(event.srcElement.type=='text')">
將「onSelectStart="return(event.srcElement.type=='text')"」貼在要可以全選input的區塊即可
因為用Js寫好像會失效，所以只好麻煩一點寫在HTML標籤中了
另外這禁止全選網頁內容的種寫法在Firefox上似乎是無效的，要特別注意一下唷~!
沒有留言:
張貼留言