HTML onpaste Event Attribute - HTML Clipboard Events Attribute

The onpaste event attribute in HTML specifies a script to be executed when a user pastes content into an HTML element. This event is triggered when content is pasted using methods such as Ctrl + V, selecting "Paste" from a browser's edit menu, or choosing "Paste" from a right-click context menu.

Example of HTML onpaste Event Attribute

It will execute a JavaScript when pasting some text in an <input> element.

index.html

Example: HTML

 <input type="text" onpaste="myFunction()" value="Paste something in here">

Output should be:

Definition and Usage of HTML onpaste Event Attribute

The onpaste attribute fires when the user pastes some content in an element.

Note: Although the onpaste attribute is supported by all HTML elements, it is not actually possible to paste some content in, for example, a <p> element, UNLESS the element has set contenteditable to "true" (See "More Examples" below).

Tip: The onpaste attribute is mostly used on <input> elements with type="text".

Tip: There are three ways to paste some content in an element:

Press CTRL + V
Select "Paste" from the Edit menu in your browser
Right click to display the context menu and select the "Paste" command

Browser Support of HTML onpaste Event Attribute

Syntax of HTML onpaste Event Attribute

<element onpaste="script">

Attribute Values of HTML onpaste Event Attribute

Value	Description
script	The script to be run on onpaste

Technical Details of HTML onpaste Event Attribute

Supported HTML tags:	ALL HTML elements

How to execute a JavaScript when pasting some text in an <input> element

Try to paste something in here.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<input type="text" onpaste="myFunction()" value="Try to paste something in here" size="40">

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "You pasted text!";
}
</script>

</body>
</html>

Output should be:

How to Execute a JavaScript when pasting some text in a <p> element (Note that contenteditable is set to "true")

Try to paste something inside this paragraph.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>

<script>
function myFunction() {
  alert("You pasted text!");
}
</script>

</body>
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Clipboard Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference