Làm cách nào để ngăn văn bản chọn JavaScript?

Question

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

Nội dung chính Show

Phương pháp CSS
Phương pháp JavaScript
Hoặc phương pháp JS khác
Phương pháp jQuery
1. Vô hiệu hóa lựa chọn văn bản với JavaScript/jQuery
2. Vô hiệu hóa lựa chọn văn bản bằng CSS
3. Vô hiệu hóa nhấp chuột phải
4. mã hóa HTML
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ỏ?
Làm cách nào để ngăn dán trong JavaScript?
Làm cách nào để tắt sự kiện nhấp chuột trong JavaScript?
Làm cách nào để tắt sao chép dán trong JavaScript?

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 */
}

<span class="disable-select">

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

</span>

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 */   
}

<span class="copy-all-text">

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

</span>

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

// …

</body>

Nếu bạn muốn cho phép lựa chọn văn bản nhưng vẫn ngăn việc sao chép, hãy sử dụng đoạn mã sau. Bạn cũng có thể sử dụng bind() của jQuery để đạt được điều tương tự bằng cách chỉ định các sự kiện cắt và sao chép được kích hoạt khi người dùng cắt hoặc sao chép văn bản.

JS

1

2

3

4

5

// …

</body>

jQuery

1

2

3

4

5

$(tài liệu). sẵn sàng(chức năng () {

$('body').ràng buộc('bản sao cắt', function (e) {

e. ngăn chặn Mặc định();

});

2. Vô hiệu hóa lựa chọn văn bản bằng CSS

Thuộc tính user-select cho biết nơi người dùng có thể chọn văn bản trong một phần tử. Nếu được đặt thành không, nó sẽ chặn lựa chọn bắt đầu trên phần tử đó. Bạn có thể sử dụng thuộc tính này và áp dụng nó trên thẻ <body> để ngăn chọn văn bản

CSS

1

2

3

4

5

6

7

8

9

/* Prevent text selection of an element in all major browsers */

cơ thể {

-youbkit-chạm-callout: không có; /* iOS Safari */

-youbkit-người dùng-select: không có; /* Chrome 6. 0+, Safari3. 1+, Edge và Opera 15+ */

-moz-người dùng-select: không có; /* Firefox */

-ms-người dùng-select: không có; /* IE 10+ và Edge */

người dùng-chọn. none; /* Phiên bản không có tiền tố,

hiện được hỗ trợ bởi Chrome và Opera */

}

Thay vì áp dụng các thuộc tính này cho toàn bộ cơ thể, bạn có thể di chuyển chúng đến một lớp và áp dụng chúng cho các thành phần bạn muốn vô hiệu hóa select

3. Vô hiệu hóa nhấp chuột phải

Bạn có thể sử dụng đoạn mã sau để ngăn chuột phải vào bất kỳ trang nào. Ý tưởng là nắm bắt sự kiện onContextMenu và trả về false trong trình xử lý sự kiện. Điều này sẽ chặn tất cả quyền truy cập vào menu ngữ cảnh từ nhấp chuột phải cũng như từ bàn phím

JS

1

tài liệu. oncontextmenu = new Chức năng("return false;");

jQuery

1

2

3

4

5

$(tài liệu). sẵn sàng(chức năng () {

$("body").bật("contextmenu",function(e) {

trả về false;

});

4. mã hóa HTML

Tất cả các phương pháp nêu trên sẽ hoạt động tốt, nhưng mã nguồn HTML của bạn vẫn dễ bị tấn công. Bạn có thể ngăn mã nguồn bị người khác đánh cắp bằng cách sử dụng công cụ mã hóa HTML này

Mã hóa HTML chuyển đổi nội dung trang web của bạn sang định dạng không dễ hiểu. Điều này có thể bảo vệ mã của bạn khỏi bị người khác đánh cắp ở mức độ lớn. Một hạn chế của nó là bạn sẽ chỉ thấy trang của mình trên các trình duyệt hỗ trợ JavaScript

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ưu câu trả lời này.

Làm cách nào để ngăn dán trong JavaScript?

Tắt cắt, sao chép và dán trong hộp văn bản bằng jquery, javascript .

Khi chúng tôi không muốn hiển thị bất kỳ thông báo nào khi cắt, sao chép và dán. < asp. TextBox ID="TextBox1" runat="server" oncopy="return false" onpaste="return false" oncut="return false">

Khi chúng tôi muốn hiển thị thông báo cảnh báo khi sao chép, dán và cắt