|
|
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 |
| List of Clipboard Events Attribute | Clipboard Events Attribute |
| HTML oncopy Event Attribute | Clipboard Events Attribute |
| HTML oncut Event Attribute | Clipboard Events Attribute |
| HTML onpaste Event Attribute | Clipboard Events Attribute |
| Example of HTML onpaste Event Attribute | Clipboard Events Attribute |
| Definition and Usage of HTML onpaste Event Attribute | Clipboard Events Attribute |
| Browser Support of HTML onpaste Event Attribute | Clipboard Events Attribute |
| Syntax of HTML onpaste Event Attribute | Clipboard Events Attribute |
| Attribute Values of HTML onpaste Event Attribute | Clipboard Events Attribute |
| Technical Details of HTML onpaste Event Attribute | Clipboard Events Attribute |
| How to execute a JavaScript when pasting some text in an <input> element | Clipboard Events Attribute |
| How to Execute a JavaScript when pasting some text in a <p> element (Note that contenteditable is set to "true") | Clipboard Events Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Clipboard Events Attribute |
Uploaded by: | Admin |
Reffered: https://www.w3schools.com/tags/ev_onpaste.asp