Sự kiện oncut trong JavaScript

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

Sự kiện oncut trong JavaScript

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

Code Sự kiện oncut trong JavaScript

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

oncut="thongBao()"

<div id="ktrai">
 <textarea oncut="thongBao()" >Nội dung được cắt!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>

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

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

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

Chạy Thử

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

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

<div id="ktrai">
 <textarea id="noidung" >Nội dung được cắt!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>

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

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

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

Chạy Thử

Ứng Dụng oncut Trong JavaScript Khi Xử Lý Nội Dung Người Dùng

Sự kiện oncut không chỉ dùng để phát hiện thao tác cắt văn bản. Khi kết hợp với JavaScript, sự kiện này còn giúp website kiểm soát cách người dùng thao tác với dữ liệu nhập vào, từ đó hạn chế những hành động ngoài ý muốn và tạo trải nghiệm phù hợp hơn.

Kiểm Tra Nội Dung Trước Khi Người Dùng Cắt

Trong một số biểu mẫu, nội dung người dùng nhập vào có thể cần được kiểm tra trước khi cho phép cắt. Chẳng hạn, website có thể phát hiện thao tác này để ghi nhận trạng thái dữ liệu, hiển thị cảnh báo hoặc thực hiện một xử lý bổ sung.

Điểm cần lưu ý là oncut được kích hoạt khi thao tác cắt xảy ra, vì vậy không nên xem đây là cơ chế thay thế cho việc kiểm tra dữ liệu. Nếu nội dung quan trọng, website vẫn cần xác thực lại dữ liệu ở bước xử lý cuối.

input.oncut = function() {
    console.log("Người dùng đang cắt nội dung");
};

Ngăn Thao Tác Cắt Dữ Liệu Không Mong Muốn

Với những trường nhập liệu chứa thông tin cần giữ nguyên, oncut có thể được sử dụng để phát hiện và ngăn thao tác cắt. Cách này phù hợp với những trường hợp đặc biệt, nhưng không nên áp dụng tùy tiện vì có thể làm hạn chế thao tác quen thuộc của người dùng.

Nếu mục tiêu là bảo vệ dữ liệu, nên ưu tiên giải pháp phù hợp với chức năng của website thay vì chỉ chặn thao tác cắt. Đặc biệt, dữ liệu quan trọng không nên được bảo vệ bằng JavaScript ở phía trình duyệt בלבד.

input.oncut = function(event) {
    event.preventDefault();
};

Kết Hợp oncut Với Các Sự Kiện Nhập Liệu Khác

Trong giao diện có nhiều thao tác với văn bản, oncut nên được kết hợp với các sự kiện liên quan thay vì xử lý riêng lẻ. Ví dụ, oninput có thể theo dõi sự thay đổi của nội dung, trong khi oncut giúp nhận biết riêng thao tác cắt.

Cách kết hợp này giúp logic JavaScript rõ ràng hơn: một sự kiện phụ trách thay đổi dữ liệu, còn sự kiện khác xử lý hành động cụ thể của người dùng. Nhờ vậy, website dễ kiểm soát và bảo trì hơn khi chức năng ngày càng mở rộng.

input.oncut = function() {
    console.log("Nội dung vừa được cắt");
};

input.oninput = function() {
    console.log("Nội dung đã thay đổi");
};

Lời kết

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