Sự kiện oncopy trong JavaScript

• Trần Thị Vân
• 1118
• 27/08/2025

Chức năng của Sự kiện oncopy trong JavaScript

Sự kiện oncopy trong JavaScript dùng để xử lý sự kiện khi người dùng thực hiện hành vi copy nội dung trong phần tử HTML, bạn có thể làm kết quả thông báo copy thành công hoặc cài đặt không cho phép copy nội dung.

Code Sự kiện oncopy trong JavaScript

Sự kiện oncopy gán trực tiếp trong JavaScript

oncopy="thongBao()"

<div id="ktrai">
 <textarea oncopy="thongBao()" >Nội dung copy!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>

<div id="kphai">
 <textarea oncopy="thongBao2();return false;" >Nội dung không được copy!</textarea><br>
 <span id="tbao2" style="color:red"></span>
</div>

<script>
function thongBao(){
 document.getElementById("tbao").innerHTML = "Bạn đã copy nội dung!"
}

function thongBao2(){
 document.getElementById("tbao2").innerHTML = "Bạn không được copy nội dung!"
}
</script>

Chạy Thử

Sự kiện oncopy không gán trực tiếp trong JavaScript

noidung.addEventListener("copy", function(event) {
 document.getElementById("tbao").innerHTML = "Bạn đã copy nội dung!"
});

<div id="ktrai">
 <textarea id="noidung" >Nội dung copy!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>

<div id="kphai">
 <textarea id="noidung2" >Nội dung không được copy!</textarea><br>
 <span id="tbao2" style="color:red"></span>
</div>

<script>
var noidung = document.getElementById("noidung");
noidung.addEventListener("copy", function(event) {
 document.getElementById("tbao").innerHTML = "Bạn đã copy nội dung!"
});

var noidung2 = document.getElementById("noidung2");
noidung2.addEventListener("copy", function(event) {
 document.getElementById("tbao2").innerHTML = "Bạn không được copy nội dung!"
 event.preventDefault(); // Ngăn hành động copy
});
</script>

Chạy Thử

Ứng Dụng Sự Kiện oncopy Trong JavaScript Thực Tế

Sự kiện oncopy không chỉ dùng để phát hiện thời điểm người dùng sao chép nội dung. Khi kết hợp với JavaScript, sự kiện này còn có thể xử lý dữ liệu trước khi đưa vào clipboard, bổ sung thông tin cần thiết hoặc kiểm soát hành vi sao chép trên một khu vực cụ thể.

Cách triển khai nên dựa trên mục đích thực tế thay vì chặn sao chép một cách máy móc. Nếu cần bảo vệ nội dung, có thể thông báo hoặc điều chỉnh dữ liệu sao chép; nếu cần hỗ trợ người dùng, nên ưu tiên tạo ra nội dung clipboard rõ ràng và hữu ích.

Tự Động Thay Đổi Nội Dung Khi Người Dùng Sao Chép

JavaScript có thể nhận biết thao tác sao chép và thay đổi phần văn bản được đưa vào clipboard. Cách này phù hợp khi muốn bổ sung tiêu đề, định dạng lại nội dung hoặc thêm một đoạn thông tin đi kèm.

document.addEventListener("copy", function (event) {
    const selectedText = window.getSelection().toString();

    if (!selectedText) {
        return;
    }

    event.clipboardData.setData(
        "text/plain",
        selectedText + "nnNguồn: Web Mới"
    );

    event.preventDefault();
});

Trong ví dụ trên, nội dung người dùng chọn được lấy thông qua window.getSelection(). Sau đó, dữ liệu mới được ghi vào clipboard bằng clipboardData.setData(). Lệnh preventDefault() ngăn trình duyệt tiếp tục thực hiện thao tác sao chép mặc định để sử dụng nội dung đã được JavaScript xử lý.

Thêm Thông Tin Vào Nội Dung Được Sao Chép

Một ứng dụng thực tế khác là bổ sung nguồn bài viết hoặc thông tin nhận diện vào phần nội dung được sao chép. Điều này đặc biệt hữu ích với các bài hướng dẫn, tài liệu hoặc nội dung có khả năng được người đọc chia sẻ sang nơi khác.

document.addEventListener("copy", function (event) {
    const text = window.getSelection().toString();

    if (!text) {
        return;
    }

    const source = "nnNguồn: " + document.title;
    const copiedText = text + source;

    event.clipboardData.setData("text/plain", copiedText);
    event.preventDefault();
});

Cách làm này vẫn giữ phần văn bản mà người dùng đã chọn, đồng thời nối thêm thông tin nguồn. Nên sử dụng với mục đích cung cấp ngữ cảnh hoặc giúp người đọc nhận biết xuất xứ nội dung, thay vì chèn quá nhiều thông tin khiến dữ liệu sau khi sao chép trở nên khó sử dụng.

Ngăn Sao Chép Nội Dung Bằng Sự Kiện oncopy

Trong một số trường hợp, oncopy có thể được dùng để ngăn thao tác sao chép trên một vùng nội dung nhất định. Khi đó, JavaScript gọi preventDefault() để hủy hành động sao chép mặc định của trình duyệt.

document.querySelector(".no-copy").addEventListener("copy", function (event) {
    event.preventDefault();
});

Cách này chỉ nên xem là một biện pháp kiểm soát hành vi ở phía giao diện. Nó không thể bảo đảm nội dung được bảo vệ tuyệt đối, bởi người dùng vẫn có thể tiếp cận dữ liệu bằng nhiều phương thức khác. Vì vậy, nếu nội dung có giá trị quan trọng, không nên xem việc chặn sự kiện sao chép là một giải pháp bảo mật.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Sự kiện oncopy trong JavaScript.