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 Show
người dùng chọn đúng cáchTrong css, chúng tôi có thuộc tính Bằng cách đặt thuộc tính Vô hiệu hóa lựa chọn văn bảnVí 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
css
Bây giờ, không thể chọn văn bản có trong Bản trình diễn CodepenXem 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ẻ 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
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
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
Kết quả vô hiệu hóa đánh dấu lựa chọn văn bảnNgườ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 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ố
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
Thêm hướng dẫn CSSBâ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
Xuất bản lần đầu vào ngày 18 tháng 2 năm 2020 Chia sẻ trang này
Được viết bởiMichael 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 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 . |