Sự kiện onpaste trong JavaScript

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

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

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

Code Sự kiện onpaste trong JavaScript

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

onpaste="thongBao()"

<div id="ktrai">
 <textarea onpaste="thongBao()" >Được phép paste nội dung vào đây!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>
<div id="kphai">
 <textarea onpaste="thongBao2();return false;" >Không được phép paste nội dung vào đây!</textarea><br>
 <span id="tbao2" style="color:red"></span>
</div>

<script>
function thongBao(){
document.getElementById("tbao").innerHTML = "Bạn đã paste nội dung vào đây!"
}

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

Chạy Thử

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

noidung.addEventListener("paste", function(event) {
 document.getElementById("tbao").innerHTML = "Bạn đã paste nội dung vào đây!"
});

<div id="ktrai">
 <textarea id="noidung" >Được phép paste nội dung vào đây!</textarea><br>
 <span id="tbao" style="color:green"></span>
</div>
<div id="kphai">
 <textarea id="noidung2" >Không được phép paste nội dung vào đây!</textarea><br>
 <span id="tbao2" style="color:red"></span>
</div>

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

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

Chạy Thử

Các tình huống nên dùng onpaste trong JavaScript

Sự kiện onpaste phù hợp khi website cần phản ứng ngay lúc người dùng dán dữ liệu vào một phần tử nhập liệu. Thay vì chỉ nhận nội dung được dán, JavaScript có thể kiểm tra, làm sạch hoặc xử lý dữ liệu trước khi đưa vào quy trình tiếp theo.

Kiểm tra dữ liệu trước khi cho phép dán

Không phải nội dung nào được sao chép cũng phù hợp với trường nhập liệu. Với onpaste, bạn có thể đọc dữ liệu từ thao tác dán và kiểm tra định dạng trước khi chấp nhận. Cách này hữu ích với các ô nhập mã xác nhận, số điện thoại, mã sản phẩm hoặc những trường chỉ cho phép một kiểu dữ liệu nhất định.

Ví dụ, nếu ô nhập chỉ nhận chữ số, có thể kiểm tra nội dung được dán và ngăn thao tác khi dữ liệu chứa ký tự không phù hợp:

input.addEventListener('paste', function(event) {
    const data = event.clipboardData.getData('text');

    if (!/^d+$/.test(data)) {
        event.preventDefault();
        alert('Vui lòng chỉ dán dữ liệu dạng số.');
    }
});

Điểm quan trọng là sử dụng event.preventDefault() khi muốn chặn nội dung được đưa vào ô nhập. Nhờ đó, dữ liệu không hợp lệ sẽ không tiếp tục xuất hiện trong giao diện.

Ngăn nội dung không hợp lệ được dán vào ô nhập

Trong một số biểu mẫu, người dùng có thể vô tình dán khoảng trắng, ký tự đặc biệt hoặc nội dung vượt quá quy định. Thay vì để dữ liệu sai đi tiếp rồi mới báo lỗi ở bước gửi biểu mẫu, website có thể xử lý ngay tại thời điểm dán.

Chẳng hạn, một ô nhập mã chỉ cho phép tối đa 6 ký tự. JavaScript có thể kiểm tra độ dài dữ liệu và từ chối nội dung vượt giới hạn:

input.addEventListener('paste', function(event) {
    const data = event.clipboardData.getData('text');

    if (data.length > 6) {
        event.preventDefault();
        alert('Dữ liệu không được vượt quá 6 ký tự.');
    }
});

Cách xử lý này giúp hạn chế dữ liệu sai ngay từ đầu, đồng thời tạo trải nghiệm rõ ràng hơn cho người dùng. Tuy nhiên, kiểm tra bằng JavaScript ở trình duyệt không nên được xem là lớp bảo vệ duy nhất; dữ liệu vẫn cần được kiểm tra lại ở phía máy chủ khi biểu mẫu được gửi.

Tự động xử lý dữ liệu sau khi người dùng dán

Không phải lúc nào onpaste cũng được dùng để chặn dữ liệu. Một trường hợp hữu ích khác là nhận nội dung vừa dán rồi chuẩn hóa trước khi sử dụng. Ví dụ, website có thể loại bỏ khoảng trắng thừa, chuyển ký tự về dạng chữ thường hoặc tách dữ liệu thành nhiều phần.

Với những biểu mẫu yêu cầu người dùng nhập dữ liệu từ nguồn bên ngoài, cách này giúp giảm thao tác thủ công và hạn chế lỗi định dạng. Chẳng hạn, dữ liệu được dán có thể được làm sạch trước khi hiển thị:

input.addEventListener('paste', function(event) {
    const data = event.clipboardData.getData('text').trim();

    event.preventDefault();
    input.value = data.toLowerCase();
});

Việc xử lý nên phù hợp với mục đích của trường nhập liệu. Không nên tự ý thay đổi dữ liệu nếu người dùng cần giữ nguyên nội dung ban đầu, đặc biệt với mật khẩu, mã có phân biệt chữ hoa và chữ thường hoặc những dữ liệu có ý nghĩa chính xác theo từng ký tự.

Lời kết

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