search

Home  >  Article  >  Web Front-end  >  HTML DOM Clipboard event

HTML DOM Clipboard event

王林
王林forward
2023-09-23 16:13:011014browse

HTML DOM Clipboard event is used to provide information about clipboard modifications. Events can be cut, copy and paste. Clipboard events can be used to make your website more accessible by providing users with information about how the clipboard has been modified.

Properties

The following are the properties of the Clipboard event−

##PropertiesDescriptionclipboardDataReturns an object containing the data affected by the clipboard operation (cut, copy, or paste).
Events

The following are event types belonging to Clipboard events−

EventsDescriptiononcopyThis event is triggered when the user copies the content of an element. OncutThis event is triggered when the user cuts the content of the element. onpasteThis event is triggered when the user pastes some content in the element.
Syntax

The following is the syntax of clipboard event −

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

Here, type can be 'cut', 'copy' or 'Paste', the second argument is optional. The second parameter contains ClipboardData, dataType, and data.

Example

Let's look at an example of one of the Clipboard event 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>

Output

This will produce the following output−

HTML DOM Clipboard事件

When copying the text in TEXTBOX −

HTML DOM Clipboard事件

In the above example −

we create a type An d5fd7aea971a85678ba271703566ebfd element for text. It has a tag TEXTBOX assigned to it and already contains some text for the user to select. After the user copies the text, the CopyText() method will be executed. The 

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

CopyText() method gets the

element using the getElementById() method on the document and displays "You have copied the text!" inside the paragraph. 

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

The above is the detailed content of HTML DOM Clipboard event. For more information, please follow other related articles on the PHP Chinese website!

html 对象 事件 dom input
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to add video to HTML page?Next article：How to add video to HTML page?

Related articles

See more