# 網頁不給copy paste?
###### tags: `JS` `CSS`

找資料的時候看到這個[範例網站](https://www.tutorialsmate.com/2020/04/http-interview-questions.html)，發現了些有趣的東西，姑且不論這種作法對使用者體驗不是很好，今天是來整理怎麼實作與解決這個問題
> 其實正確來說，基本上是做「不給反白」(selection)，畢竟你補能選到該字，就不能執行後續的動作

### 實作與解法
1. 用元素覆蓋
* 實作:容器內用一個元素撐滿者個容器，讓其他的元素無法被選到，範例如下:

可以看到container的第一個child撐滿了整個container，所以看不出來有遮罩
不過這種作法其實沒有辦法防止`ctrl+A`這種全選方式，這也是我以前唯一知到的做法。

* 解法: 用devtool隱藏該元素即可

2. CSS屬性 [user-select](https://www.w3schools.com/cssref/css3_pr_user-select.asp)
* 實作: 將不想被選到的容器設定user-select:none
上網爬文大都推薦這種方式，既簡單也不會被`ctrl+A`這種全選方式選到文字
* 解法: 用devtool找到該容器設定這個屬性的元素，取消它
> 如果包覆的容器太多不好找，可以在網頁點右鍵→檢視網頁原始碼，然後直接搜尋關鍵字`user-select:none`，應該會比較快
>
> 

3. 用JS，這也[範例網站](https://www.tutorialsmate.com/2020/04/http-interview-questions.html)用的方式，我在該網站從上面兩個角度出發都沒找到解法後，就覺得應該是js在搞鬼，本來想說script tag內容會不會都落落長，找不到方向，結果它自己是一支獨立出來的function，相當的「透明」😂
> 連註解都這麼明顯，小弟我太眼殘，應該更快找到的🤦‍♂️
> 由於這樣不好找這支`disableSelection`做了啥，所以一樣右鍵→檢視網頁原始碼，搜關鍵字，很快找到:
>
> 
>
> 原來是用第三方的library呀~
* 實作: 同上述，引用該function並將不願被遠到的node傳入(範例網站是傳document.body)
* 解法: [disable js](https://developers.google.com/web/tools/chrome-devtools/javascript/disable)
> 打開devtool→鍵盤按`ctrl+shift+p`→輸入javascipt找到disable javascript
>
> 
>
> 就完工囉
>
> 
>
>※完工後建議重新enable javascript，否則網頁很可能會有不正常的行為而無法使用