Sự kiện HTML DOM Clipboard

Sự kiện HTML DOM Clipboard được sử dụng để cung cấp thông tin về việc sửa đổi khay nhớ tạm. Các sự kiện có thể được cắt, sao chép và dán. Sự kiện Clipboard có thể được sử 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 sửa đổi khay nhớ tạm.

Thuộc tính

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

Thuộc tính	Mô tả
ClipboardData	Để trả về một đối tượng chứa dữ liệu bị ảnh hưởng bởi thao tác trên khay nhớ tạm (cắt, sao chép hoặc dán).

Sự kiện

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

Sự kiện	Mô tả
nội soi	Sự kiện này kích hoạt khi người dùng sao chép nội dung của một phần tử.
Oncut	Sự kiện này xảy ra khi người dùng cắt nội dung của một phần tử
onpaste	Sự kiện này kích hoạt khi người dùng dán một số nội dung vào một phần tử

Cú pháp

Sau đây là cú pháp cho sự kiện khay nhớ tạm -

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

Ở đây, loại 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à dữ liệu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về một trong các sự kiện trên Bảng tạm -

<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
   function CopyText() {
      document.getElementById("Sample").innerHTML = "The text has been copied by you!"
   }
</script>
</body>
</html>

Đầu ra

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

Sự kiện HTML DOM Clipboard

Khi sao chép văn bản bên trong TEXTBOX -

Sự kiện HTML DOM Clipboard

Trong ví dụ trên -

Chúng tôi đã tạo một phần tử với kiểu văn bản. Nó có một nhãn TEXTBOX được gán cho nó và chứa một số văn bản bên trong nó để người dùng chọn. Khi người dùng sao chép văn bản, phương thức CopyText () được thực thi.

<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">

Phương thức CopyText () nhận phần tử

bằng cách sử dụng phương thức getElementById () trên tài liệu và hiển thị “Văn bản đã được bạn sao chép!” Bên trong đoạn văn.

function CopyText() {
   document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}