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

Trong một số trường hợp, chúng tôi không muốn người khác sao chép văn bản đã chọn. Để ngăn văn bản trên trang web, chúng tôi có thể chọn giải pháp CSS, Pure JavaScript hoặc jQuery. Chúng ta sẽ thảo luận từng cái một

Hãy bắt đầu…

Phương pháp CSS

Chúng tôi có thể vô hiệu hóa lựa chọn văn bản bằng cách sử dụng một số kiểu CSS, người dùng chọn giải quyết mục đích

.disable-select{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

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

Giờ đây, lớp tắt-chọn này sẽ ngăn lựa chọn văn bản do người dùng chọn. không có tài sản

Làm cách nào để chọn tất cả văn bản khi nhấp?

Chúng tôi cũng có thể bật chọn tất cả văn bản khi nhấp vào văn bản

.copy-all-text{  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}

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

Phương pháp JavaScript

Nếu bạn muốn sử dụng phương thức JavaScript, thì bạn cần thêm thuộc tính không thể chọn được đặt thành bật, sau đó thêm kiểu người dùng chọn thành không. Ở đây cũng đang ghi đè sự kiện dragstart và selectstart thành false

var selector = $["span"];
selector.attr['unselectable', 'on']
.css['user-select', 'none']
.on['selectstart dragstart', false];

Hoặc phương pháp JS khác

Phương thức này sẽ chỉ thêm onselectstart rồi đặt thành trả về false

function disableSelection[target]{
if [typeof target.onselectstart!="undefined"] //For IE 
    target.onselectstart=function[]{return false}
else if [typeof target.style.MozUserSelect!="undefined"] //For Firefox
    target.style.MozUserSelect="none"
else //All other route [For Opera]
    target.onmousedown=function[]{return false}
target.style.cursor = "default"
}

//Call above method
disableSelection[document.body];

//By Class Name Selector
disableSelection[document.querySelector[".no-select"]];

Phương pháp jQuery

Nếu ứng dụng đã sử dụng thư viện jQuery thì chúng ta cũng có thể chọn một phương thức jQuery cho dễ dàng

Bài đăng này sẽ thảo luận về cách ngăn chặn hành vi trộm cắp nội dung từ trang web của bạn chỉ bằng cách vô hiệu hóa chức năng chọn văn bản, cắt, sao chép và nhấp chuột phải thông qua chuột và bàn phím. Chúng tôi cũng sẽ đề cập đến cách bạn có thể mã hóa HTML để chỉ trình duyệt mới có thể đọc được mã nguồn

1. Vô hiệu hóa lựa chọn văn bản với JavaScript/jQuery

Bạn có thể sử dụng đoạn mã sau để ngăn lựa chọn văn bản [và do đó cắt sao chép] trong nội dung hoặc thẻ div. Về cơ bản, nó sẽ ghi đè hành vi của trình duyệt mặc định trên sự kiện onmousedown và onselectstart

JS

1

2

3

4

5

sự kiện