Javascript cut
The javascript cut event is fired when the user has returned a “cut” action through the web browser’s user interface.
If the user returns a cut action on uneditable content(text), the javascript cut event still fires but the event object contains no data.
The event’s default action is to copy(content) the current selection to the system clipboard and remove(content) it from the document.
A handler for this event can change the clipboard contents(text) by calling setData(format, data) on the javascript event’s ClipboardEvent.clipboardData property, and canceling the default action providing event.preventDefault().
EXAMPLE:
HTML:
<div class="source" contenteditable="true">Try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div>
SCRIPT:
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();
});
OUTPUT:
