Sự kiện Clipboard HTML DOM

Sự kiện Clipboard HTML DOM được dùng để cung cấp thông tin về việc sửa đổi clipboard. Các sự kiện có thể là cut, copy và paste. Sự kiện Clipboard có thể được dùng để làm cho trang web của bạn dễ truy cập hơn, tức là cung cấp cho người dùng thông tin về cách clipboard đang được sửa đổi.

Thuộc tính

Sau đây là thuộc tính cho sự kiện Clipboard:

Sự kiện

Sau đây là các loại sự kiện thuộc về sự kiện Clipboard:

Cú pháp

Cú pháp sau đây dùng cho sự kiện clipboard:

var clipboardEvent = new ClipboardEvent(type, [options]);

Ở đây, type có thể là 'cut', 'copy' hoặc 'paste' và tham số thứ hai là tùy chọn. Tham số thứ hai chứa clipboardData, dataType và data.

Ví dụ

Hãy xem một ví dụ cho một trong các sự kiện Clipboard là oncopy:

<!DOCTYPE html> <html> <body> <form> <label> HỘP VĂN BẢN <input type="text" oncopy="CopyText()" value="Sao chép văn bản này"> </label> </form> <p id="Sample"></p> <script> function CopyText() { document.getElementById("Sample").innerHTML = "Văn bản đã được sao chép bởi bạn!"; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi sao chép văn bản bên trong HỘP VĂN BẢN:

Trong ví dụ trên:

Chúng ta đã tạo một phần tử <input> với kiểu text. Nó có nhãn HỘP VĂN BẢN được gán cho nó và chứa một số văn bản bên trong đã cho người dùng chọn. Khi sao chép văn bản bởi người dùng, phương thức CopyText() được thực thi.

<label> HỘP VĂN BẢN <input type="text" oncopy="CopyText()" value="Sao chép văn bản này">

Phương thức CopyText() lấy phần tử <p> bằng phương thức getElementById() trên document và hiển thị "Văn bản đã được sao chép bởi bạn!" bên trong đoạn văn.

function CopyText() { document.getElementById("Sample").innerHTML = "Văn bản đã được sao chép bởi bạn!"; }