HTML DOM Clipboard事件-html教學-PHP中文網

HTML DOM Clipboard事件

王林

發布： 2023-09-23 16:13:01

轉載

1030 人瀏覽過

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事件

#在上面的範例中−

我們建立了一個類型為文本的元素。它有一個標籤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中文網其他相關文章！