搜尋

首頁  >  文章  >  web前端  >  HTML DOM Clipboard事件

HTML DOM Clipboard事件

王林
王林轉載
2023-09-23 16:13:011010瀏覽

HTML DOM Clipboard事件用於提供剪貼簿修改的資訊。事件可以是剪下、複製和貼上。剪貼簿事件可用於使您的網站更易於訪問，即向使用者提供有關剪貼簿如何被修改的資訊。

屬性

以下是Clipboard事件的屬性−

##描述##clipboardData傳回一個包含剪貼簿操作（剪下、複製或貼上）影響的資料的物件。
#屬性

事件

以下是屬於Clipboard事件的事件類型−事件描述oncopy當使用者複製元素的內容時觸發此事件。 Oncut當使用者剪下元素的內容時觸發此事件。 onpaste當使用者在元素中貼上一些內容時觸發此事件。

語法

以下是clipboard事件的語法−

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

這裡，type可以是'剪下來'、'複製'或'貼上'，第二個參數是可選的。第二個參數包含 ClipboardData、dataType 和 data。

範例

讓我們來看看Clipboard 事件oncopy 之一的範例-

<!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>

輸出

這會產生以下輸出−

HTML DOM Clipboard事件

#在複製TEXTBOX內的文字時−

HTML DOM Clipboard事件

#在上面的範例中−

我們建立了一個類型為文本的d5fd7aea971a85678ba271703566ebfd元素。它有一個標籤TEXTBOX分配給它，並且已經包含了一些文字供使用者選擇。使用者複製文字後，將執行CopyText()方法。 

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

CopyText() 方法使用 document 上的 getElementById() 方法取得

元素，並在段落內顯示「您已複製了該文字！」。 
function CopyText() {
   document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
###

以上是HTML DOM Clipboard事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html 对象 事件 dom input
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：如何在HTML頁面中新增影片？下一篇：如何在HTML頁面中新增影片？

相關文章

看更多