Element: cut event - Web APIs | MDN
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("cut", (event) => { })
oncut = (event) => { }
Event type
A ClipboardEvent. Inherits from Event.
Examples
Live example
HTML
html
<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
div.source,
div.target {
border: 1px solid gray;
margin: 0.5rem;
padding: 0.5rem;
height: 1rem;
background-color: #e9eef1;
}
JavaScript
js
const source = document.querySelector("div.source");
source.addEventListener("cut", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
selection.deleteFromDocument();
event.preventDefault();
});
Result
Specifications
| Specification |
|---|
| Clipboard API and events # clipboard-event-cut |
| HTML # handler-oncut |