Vô hiệu hóa copy text bằng CSS sử dụng user-select:none

Copy text là hình thức lựa chọn một vùng văn bản bằng chuột và thực hiện tao tác chuột để copy text. Tuy nhiên, trong một số trường hợp, chủ trang web không muốn cho người xem copy một đoạn nào đó vì một lí do nào đó thì chủ trang web có thể sử dụng một thuộc tính CSS được hỗ trợ sẵn bởi hầu hết các trình duyệt đó là user-select:none;

Vô hiệu hóa copy text bằng CSS sử dụng user-select:none

Với thuộc tính user-select:none; được cung cấp, nó cho phép người người xem, lựa chọn một đoạn text và bỏ qua một số đoạn text nằm trong chính đoạn text đó. Thuận tiện hơn so với việc phải lựa chọn từng đoạn text một. Dễ hiểu là nó cho phép vô hiệu hóa việc chọn ở một phần tử và không gây ảnh hưởng đến việc chọn những phần tử cạnh khác.
Ví dụ:
Có thể chọn cả vùng 1 và vùng 3, bỏ qua vùng 2 chỉ trong một lần quét chuột.

Hướng dẫn thực hiện

user-select:none; có cách viết khác nhau trên mỗi trình duyệt và cụ thể đó là:

• Chrome, Opera: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• Internet Explorer: -ms-user-select

Và việc của các ông bây giờ đơn giản chỉ là thêm thuộc tính user-select:none; vào những phần tử cần vô hiệu hóa.

Ví dụ

Code CSS

.disable-text { 
 -webkit-user-select:none; 
 -webkit-touch-callout:none; 
  -moz-user-select:none; 
  -ms-user-select:none; 
  user-select:none;    
} 

Code HTML

<div>
 <p>Có thể chọn text ở đây</p> 
 <div class="disable-text"> 
  <p>Không thể chọn ở đây</p> 
 </div> 
 <div> 
  <p>Nhưng lại có thể chọn ở đây</p> 
  <a href="https://codevodoi.blogspot.com/2020/04/lam-nao-e-vo-hieu-hoa-lien-ket-link.html">Vô hiệu hóa link bằng CSS</a>
 </div>
</div>