Vô hiệu hóa chọn văn bản CSS

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

<div class="disable-text-selection">   <h1>You can't select meh1>div><div>
   <h1>You can select me...h1>
div>

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 CodePen

Trong 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;
}
1

Trì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

Vô hiệu hóa chọn văn bản CSS

Được viết bởi

Michael Gearon

Michael 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

Làm cách nào để tắt thẻ chọn bằng CSS?

Để tắt đánh dấu lựa chọn văn bản trong trình duyệt Google Chrome bằng CSS, chỉ cần đặt thuộc tính CSS -user-select thành không . Và không cần tiền tố cho Trình duyệt Google Chrome và Opera.

Làm cách nào để tắt lựa chọn văn bản trong JavaScript?

Cách vô hiệu hóa lựa chọn văn bản bằng JavaScript. Áp dụng Sự kiện onmousedown và onselectstart cho các thẻ để ngăn việc chọn và sao chép/cắt văn bản trên trang web của bạn. Nó ghi đè hành vi mặc định của trình duyệt.

Làm cách nào tôi có thể ngăn lựa chọn thành phần văn bản bằng cách kéo con trỏ?

Bạn cần phải gọi sự kiện. preventDefault() trong cả sự kiện xuống và di chuyển để ngăn trình duyệt chọn văn bản.

Làm cách nào để tắt CSS trường đầu vào?

Để tắt trường nhập liệu trong HTML, thuộc tính “con trỏ-sự kiện” của CSS được sử dụng. Để làm như vậy, hãy thêm trường đầu vào và đặt giá trị của sự kiện con trỏ là “không” để tắt trường đầu vào .