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

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách tắt hoặc ngăn các thao tác CUT, COPY và PASTE trong TextBox hoặc TextArea bằng JavaScript

Các thao tác Cắt, Sao chép và Dán trong TextBox hoặc TextArea có thể được thực hiện bằng cách sử dụng nút CTRL hoặc trên Nhấp chuột phải

Bài viết này sẽ minh họa cách tắt các thao tác Cắt, Sao chép và Dán bằng cả nút CTRL và Nhấp chuột phải bằng JavaScript

 

 

Vô hiệu hóa (Ngăn chặn) Cắt, Sao chép và Dán bằng JavaScript

Đánh dấu HTML sau bao gồm HTML TextBox và TextArea được gán với CssClass bị vô hiệu hóa

Bên trong trình xử lý sự kiện onload của cửa sổ, tất cả các phần tử bị vô hiệu hóa Lớp Css đều được tham chiếu và đối với mỗi phần tử, các trình xử lý sự kiện Cắt, Sao chép và Dán được đính kèm bằng JavaScript

Bên trong các trình xử lý sự kiện Cắt, Sao chép và Dán, sự kiện sẽ bị hủy bằng cách sử dụng hàm preventDefault

Giờ đây, bất cứ khi nào người dùng cố gắng thực hiện các thao tác Cắt, Sao chép và Dán, thao tác này sẽ không được thực hiện

Phần hay nhất của đoạn mã này, nó không chỉ vô hiệu hóa các thao tác Cắt, Sao chép và Dán bằng nút CTRL mà còn vô hiệu hóa nó trên Nhấp chuột phải mà không vô hiệu hóa chức năng Nhấp chuột phải

Vì một số lý do (như không cho phép sao chép Email từ Hộp văn bản Email sang Hộp văn bản Xác nhận Email), chúng tôi hạn chế người dùng sao chép, dán và cắt nội dung từ Hộp văn bản bằng cách sử dụng CTRL+C, CTRL+V và CTRL+X. Chúng tôi có thể thực hiện chức năng này bằng cách sử dụng các phương pháp dưới đây

Chào mừng bạn đến với hướng dẫn về cách ngăn sao chép văn bản trên trang web bằng Javascript và CSS. Bạn đang gặp một số vấn đề với kẻ trộm nội dung?

Để vô hiệu hóa sao chép văn bản trong CSS và Javascript, có 3 điều chúng ta cần giải quyết

1. Vô hiệu hóa nhấp chuột phải (menu ngữ cảnh) để ngăn sao chép và dán
2. Vô hiệu hóa bản sao clipboard
3. Tắt chọn và ẩn đánh dấu văn bản

Nhưng làm thế nào để chúng ta thực hiện tất cả những điều này?

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TLDR – TRANG TRÌNH BÀY NHANH

Tải xuống & Trình diễn

 

TẢI XUỐNG & THỬ NGHIỆM

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn

 

BẢN DEMO – TẮT VĂN BẢN SAO CHÉP

BẠN SẼ KHÔNG SAO CHÉP

 

 

BẢO VỆ BẢN SAO

Được rồi, bây giờ chúng ta hãy chuyển sang tất cả các biện pháp “chống sao chép” mà chúng ta có thể thực hiện để ngăn chặn việc sao chép

 

1) TẮT Nhấp chuột phải (MENU TIẾP THEO)

1-tất cả. html

// (A) PREVENT CONTEXT MENU FROM OPENING
document.addEventListener("contextmenu", evt => evt.preventDefault(), false);

Trước tiên, chúng ta hãy bắt đầu với một trong những cơ chế phổ biến nhất để ngăn sao chép – Tắt nhấp chuột phải, sao chép

• Tất cả những gì chúng ta phải làm là lắng nghe sự kiện menu ngữ cảnh addEventListener("contextmenu") và ngăn không cho nó mở đầu bằng evt.preventDefault()
• Có, chúng tôi không thực sự nhắm mục tiêu nhấp chuột phải ở đây. Bởi vì có nhiều cách khác để mở menu, với thứ gọi là “màn hình cảm ứng” ngày nay. Vì vậy, contextmenu chính xác hơn

 

 

2) TẮT BẢN SAO CLIPBOARD

1-tất cả. html

// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

Tiếp theo, đây là điều mà cá nhân tôi nghĩ là hợp lý nhất – Ngay cả sau khi tắt menu ngữ cảnh, mọi người vẫn có thể sao chép bằng phím tắt hoặc từ chính các mục menu của trình duyệt. Cách tốt nhất để ngăn chặn điều đó là nhắm mục tiêu vào chính sự kiện copy. Phần này nên được khá tự giải thích

• Chúng tôi lắng nghe sự kiện copy
• Nếu muốn, bạn có thể thay đổi văn bản đã sao chép trong khay nhớ tạm bằng evt.clipboardData.setData("text/plain", "MESSAGE")
• Cuối cùng, như thường lệ, chúng tôi ngăn hành động sao chép mặc định – evt.preventDefault()

 

3) CSS KHÔNG CÓ LỰA CHỌN & NỔI BẬT

1-tất cả. html

/* (C) NO SELECT + HIGHLIGHT COLOR */
* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }

Cuối cùng, đây là một cơ chế vô hiệu hóa bản sao chỉ được thực hiện với CSS nghiêm ngặt.

// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

1 chắc là đủ tốt, nhưng chúng tôi thêm

// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

2 để loại bỏ thêm màu nền của văn bản đã chọn – Làm cho việc xác định khối văn bản nào đã được chọn hoặc có văn bản nào đã được chọn trở nên khó khăn hơn rất nhiều. Chắc chắn là một cách tốt để ngăn chặn sao chép

P. S.

// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

1 sẽ không hoạt động trên các trình duyệt cũ, vì vậy hãy cẩn thận với nó

 

 

THÊM) CHỈ VÔ HIỆU HÓA CHO MỘT PHẦN NHẤT ĐỊNH

2 phần. html

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This section cannot be copied.

Cũng không khó lắm, nếu bạn chỉ muốn bảo vệ một phần nào đó, thì hãy nhắm mục tiêu cụ thể vào đó

// (B) PREVENT CLIPBOARD COPYING
document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

4

 

 

BIT BỔ SUNG & LIÊN KẾT

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

KHÔNG CHẮC CHẮN

Xin chúc mừng, bây giờ bạn đã đặt một vài ổ khóa, nhưng xin lưu ý rằng những ổ khóa này sẽ không ngăn được “siêu hacker bắt chước” nếu chúng đủ quyết tâm. Javascript và CSS có thể bị vô hiệu hóa và tất cả "sự bảo vệ" này sẽ chẳng là gì cả. Kiểm tra hướng dẫn của tôi trên blog khác của tôi. Cách sao chép văn bản từ trang web bị tắt nhấp chuột phải – Red Dot Geek

Chuẩn rồi. Nhưng có một số loại bảo vệ vẫn tốt hơn là không có. Ít nhất nó sẽ ngăn chặn nhiều kẻ bắt chước kém thông minh

 

PHÁP LÝ & BẢO VỆ KHÁC

Nếu những điều trên không đủ để dập tắt một kẻ bắt chước, thì đã đến lúc tìm kiếm sự bảo vệ của pháp luật

• Đầu tiên, bạn cần đặt một cái bẫy. Thêm một hình mờ mờ trên hình ảnh của bạn, đặt ẩn “bài viết này thuộc về myninjasite. com” tin nhắn ở đâu đó
• Hãy để kẻ bắt chước cắn câu
• Sử dụng Whois để tìm ra công ty lưu trữ của kẻ sao chép – Thông tin có thể bị ẩn và bạn có thể cần liên hệ với một số bên liên quan đến hành vi trộm cắp nội dung
• Khi bạn có thông tin, hãy liên hệ với công ty lưu trữ, cho họ xem bằng chứng rằng nội dung của bạn bị đánh cắp. Hầu hết các công ty lưu trữ sẽ tuân thủ, giúp đỡ và tắt bản sao mãi mãi
• Ngoài ra, bạn có thể đăng ký với DMCA, trả một khoản phí nhỏ và nhờ họ giúp bạn tắt bản sao

Cá nhân tôi chỉ đăng ký các trang web của mình với Google Search Console và Bing Webmaster Tools. Thời điểm tôi xuất bản một bài báo, tôi yêu cầu thu thập dữ liệu và đăng ký theo cách thủ công – Copycats sẽ không có cơ hội giành được thứ hạng tìm kiếm. Trên thực tế, họ chỉ tự làm hại mình bằng cách sao chép nhiều hơn mà thôi.

 

LIÊN KẾT và THAM KHẢO

• Sự kiện menu ngữ cảnh – MDN
• Sao chép sự kiện – MDN
• Bảng nhớ tạm – MDN
• Lựa chọn CSS – MDN
• Nếu bạn muốn bảo vệ nhiều hơn nữa, hãy làm xáo trộn tập lệnh của bạn để gây khó khăn cho việc xác định vị trí đặt bảo vệ
• Ví dụ trên CodePen – Tắt sao chép văn bản

 

VIDEO HƯỚNG DẪN

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Làm cách nào để tắt dán trong trường nhập liệu JavaScript?

Làm cách nào để tắt sao chép văn bản trong js?

Làm cách nào để tắt sao chép dán trong jQuery?