Tìm hiểu cách tắt tính năng chọn văn bản bằng cách sử dụng user-select Thuộc tính CSS.
Theo mặc định, trình duyệt web cho phép bạn chọn văn bản trên bất kỳ trang web cụ thể nào - miễn là văn bản đó là văn bản thực phần tử văn bản chứ không phải hình ảnh có văn bản trên đó.
Bạn có thể chọn văn bản bằng cách sử dụng chuột hoặc bàn phím, ví dụ: cmd + a (Mac) hoặc ctrl + a (Windows).
Nhưng nếu bạn không muốn cho phép lựa chọn văn bản (vì bất kỳ lý do gì) thì sao?
Bạn sử dụng thuộc tính CSS user-select và cung cấp cho nó giá trị none :
selector {
user-select: "none";
}
Vì vậy, giả sử bạn muốn tắt lựa chọn văn bản trên mọi phần tử có lớp được gọi là .select-none :
.select-none {
user-select: "none";
}Và sau đó bạn thêm lớp đó vào bất kỳ phần tử nào mà bạn muốn tắt lựa chọn văn bản trên:
<p class="select-none">This text cannot be selected.</p>Bản trình diễn:
Không thể chọn phần tử văn bản này, hãy thử bạn!
Lưu ý:bạn cần sử dụng các tiền tố trình duyệt này cho user-select thuộc tính để làm cho nó hoạt động trong tất cả các trình duyệt:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;