.png)
Chắc hẳn bạn đã từng gặp tình trạng nội dung bài viết của mình bị sao chép mà không được phép. Điều này có thể gây ra sự khó chịu và giảm giá trị của bài viết. Tuy nhiên, chúng ta có thể áp dụng một số phương pháp để hạn chế việc sao chép nội dung trên trang web của mình. Trong bài viết này, tôi sẽ chia sẻ với bạn cách sử dụng JavaScript và CSS để ngăn cản sao chép văn bản và hình ảnh.
1. Chống sao chép văn bản
Để ngăn cản người dùng sao chép văn bản trên trang web của bạn, bạn có thể sử dụng thuộc tính user-select: none; trong CSS. Khi áp dụng thuộc tính này, người dùng sẽ không thể chọn và sao chép văn bản từ trang web của bạn.
body {
user-select: none;
}
2. Chống sao chép hình ảnh
Để ngăn người dùng sao chép hình ảnh từ trang, bạn có thể sử dụng CSS để ẩn con trỏ chuột khi di chuột qua hình ảnh, kết hợp với JavaScript để ngăn chặn chuột phải trên hình ảnh.
img {
pointer-events: none;
}
3. JavaScript để chống sao chép văn bản và hình ảnh
Để tăng cường bảo vệ, bạn có thể sử dụng JavaScript để ngăn cấm chuột phải trên hình ảnh và văn bản. Đoạn mã dưới đây sẽ giúp bạn ngăn chặn menu chuột phải và sao chép nội dung không mong muốn.
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('contextmenu', function(event) {
if (event.target.tagName === 'IMG') {
event.preventDefault();
alert('Sao chép hình ảnh bị vô hiệu hóa trên trang này.');
} else if (event.target.tagName === 'P') {
event.preventDefault();
alert('Sao chép nội dung bị vô hiệu hóa trên trang này.');
}
});
document.addEventListener('selectstart', function(event) {
event.preventDefault();
alert('Sao chép nội dung bị vô hiệu hóa trên trang này.');
});
});
</script>
Không có nhận xét nào:
Đăng nhận xét