Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách vô hiệu hóa lựa chọn văn bản trên trang web bằng cách sử dụng css
người dùng chọn đúng cách
Trong css, chúng tôi có thuộc tính user-select
kiểm soát hành vi của lựa chọn văn bản cho các phần tử html
Bằng cách đặt thuộc tính user-select
với giá trị none
, chúng tôi có thể vô hiệu hóa lựa chọn/tô sáng văn bản trên trang web
Vô hiệu hóa lựa chọn văn bản
Ví dụ này chỉ cho bạn cách tắt lựa chọn văn bản cho một phần tử cụ thể
Html
You can't select me
You can select me...
css
.disable-text-selection{
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout: none;
-khtml-user-select: none;
user-select:none;
}
Bây giờ, không thể chọn văn bản có trong div
đầu tiên
Bản trình diễn Codepen
Xem Pen css disable text selection của saigowtham [@saigowthamr] trên CodePenTrong trường hợp, nếu bạn muốn tắt lựa chọn văn bản cho toàn bộ trang web, bạn cần thêm các thuộc tính css bên dưới vào thẻ
.disable-text-selection{
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout: none;
-khtml-user-select: none;
user-select:none;
}
0 của mình Ngày nay, việc sao chép một văn bản từ một trang web và đăng nó lên một trang web khác giống như đó là nội dung của riêng bạn là điều phổ biến. Cái này gọi là đạo văn
Có nhiều mã khác biệt [đồng thời, hãy xem công cụ Code Diff của chúng tôi] và các công cụ đạo văn trên Internet hiển thị nội dung bị đánh cắp. Ngoài ra, lựa chọn văn bản nổi bật là không mong muốn khi thiết kế một trang web
Trong đoạn mã này, chúng tôi sẽ chỉ cho bạn cách ngăn chặn hành vi trộm cắp nội dung từ trang web của bạn bằng cách vô hiệu hóa lựa chọn văn bản làm nổi bật bằng CSS
- Tạo một
phần tử có lớp "bị vô hiệu hóa"
- Tạo ra một cái khác
bên trong đầu tiên
yếu tố và viết văn bản của bạn
user-select:none
Lorem Ipsum is simply dummy text...
Bây giờ chúng ta đã tạo phần HTML, đã đến lúc thêm một chút mã CSS để vô hiệu hóa lựa chọn văn bản. Thuộc tính CSS người dùng chọn được giải cứu
- Đặt lựa chọn của người dùng thành "không" để ngăn phần chọn được tô sáng
- Ngoài ra, hãy thêm tiền tố nhà cung cấp -Webkit- và -Moz- cho trình duyệt Safari và Firefox
Lựa chọn người dùng được hỗ trợ hầu hết trong tất cả các trình duyệt nhưng nó vẫn cần tiền tố nhà cung cấp
Hãy tập hợp các phần mã lại với nhau và xem kết quả
Ví dụ về vô hiệu hóa đánh dấu lựa chọn văn bản
Title of the document
User-select:none
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Kết quả vô hiệu hóa đánh dấu lựa chọn văn bản
Người dùng chọn. không ai
Lorem Ipsum chỉ đơn giản là văn bản giả của ngành công nghiệp in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành công nghiệp kể từ những năm 1500, khi một nhà in vô danh lấy một bộ sưu tập kiểu chữ và xáo trộn nó để tạo thành một cuốn sách mẫu. Nó đã tồn tại không chỉ năm thế kỷ, mà còn là bước nhảy vọt sang sắp chữ điện tử, về cơ bản vẫn không thay đổi. Nó đã được phổ biến vào những năm 1960 với việc phát hành các tờ Letraset chứa các đoạn Lorem Ipsum và gần đây hơn với phần mềm xuất bản trên máy tính để bàn như Aldus PageMaker bao gồm các phiên bản của Lorem Ipsum
Có lẽ là một ý tưởng gây tranh cãi nhưng bạn có thể vô hiệu hóa khả năng người dùng chọn văn bản trong trình duyệt bằng cách sử dụng thuộc tính CSS người dùng chọn. Tuy nhiên, có thể hữu ích khi tắt tính năng này, đặc biệt nếu bạn muốn trang web của mình hoạt động tương tự như một ứng dụng hơn là một tài liệu
Để làm điều này, bạn phải sử dụng quy tắc CSS
.disable-text-selection{
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout: none;
-khtml-user-select: none;
user-select:none;
}
1Trình duyệt hỗ trợ khai báo này tốt với tiền tố trình duyệt vẫn cần thiết. Các phiên bản mới nhất của Firefox, Edge và Chrome không còn cần tiền tố, trong khi Safari và Internet Explorer cần tiền tố
Mã số
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Nếu bạn muốn áp dụng điều này cho toàn bộ tài liệu thì bạn có thể áp dụng kiểu dáng cho phần tử nội dung và sau đó nếu bạn muốn kích hoạt lại nó cho một số phần tử nhất định thì bạn có thể sử dụng
user-select: none;
Thêm hướng dẫn CSS
Bây giờ bạn đã biết thêm về cách tắt lựa chọn văn bản trong CSS, dưới đây là một số hướng dẫn khác để đọc
- Văn bản clip nền CSS
- Hướng dẫn CSS flexbox
- Đường viền CSS
Xuất bản lần đầu vào ngày 18 tháng 2 năm 2020
Chia sẻ trang này
- Chia sẻ trên Facebook
- Chia sẻ trên Twitter
Được viết bởi
Michael GearonMichael Gearon là Nhà thiết kế tương tác cao cấp tại Dịch vụ kỹ thuật số của chính phủ [GDS] ở Cardiff. Michael Gearon là một trong những tác giả của cuốn sách The Tiny CSS Projects, được xuất bản bởi Manning Publications. Trước đây Mike là nhà thiết kế sản phẩm tại GoCo Group bao gồm GoCompare, MyVoucherCodes và WeFlip. Cũng như làm việc cho các thương hiệu ở Nam Wales như BrandContent và HEOR