onpaste Event
Definition and Usage
The onpaste event occurs when the user pastes content into an element.
Although all HTML elements support the onpaste event, it is actually impossible to paste content into elements like <p> unless the element has contenteditable set to "true" (see more examples below).
Tip: The onpaste event is mainly used for <input> elements with type="text".
Tip:Content can be pasted into an element in three ways:
- CTRL + V
- Select paste from the browser's edit menu
- Select the paste command from the right-click menu
Example
Example 1
Execute JavaScript when pasting text into an <input> element:
<input type="text" onpaste="myFunction()" value="Paste something in here">
Example 2
Execute JavaScript when pasting text into a <p> element (note that contenteditable is set to "true"):
<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>
Syntax
In HTML:
<element onpaste="myScript">
In JavaScript:
object.onpaste = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("paste", myScript);
Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.
Technical Details
Bubble: | Support |
---|---|
Cancellable: | Support |
Event Type: | ClipboardEvent |
Supported HTML Tags: | All HTML Elements |
Browser Support
Events | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
onpaste | Support | Support | Support | Support | Support |