JavaScript Element cut Event

What You’ll Learn

The cut event fires when the user starts a cut action in the browser UI. Learn clipboardData.setData, why preventDefault also blocks removal, selection.deleteFromDocument(), oncut, and five try-it labs.

Introduction

Cut is like copy plus remove. When someone selects editable text and presses Ctrl+X (or Cmd+X), the browser fires cut, puts the selection on the clipboard, and deletes it from the page.

You can customize the clipboard payload with setData. If you also call preventDefault(), you must remove the selection yourself (usually selection.deleteFromDocument()) if you still want cut behavior.

Understanding cut

An instance event that answers: “Did the user just start a cut action from the browser UI?”

• Default — copy selection to clipboard and remove it from the document.
• ClipboardEvent — write with clipboardData.setData(format, data).
• Cancelable — preventDefault() blocks clipboard default and document update.
• Uneditable content — event may still fire, but often with no data.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("cut", (event) => { });

oncut = (event) => { };

Event type

A ClipboardEvent (inherits from Event).

Key property

⚖️ cut vs copy

🔒 What You Can and Cannot Do

• Can replace cut text with setData + manual delete + preventDefault().
• Cannot read clipboard contents inside a cut handler.
• Cannot change clipboard or document by only dispatching a fake cut event.
• Siblings — copy and paste complete the clipboard story.

Examples Gallery

Examples follow MDN Element: cut event. Select text in an editable box, cut with Ctrl+X / Cmd+X, then paste.

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();
});

HELLO WORLD
(source box no longer contains that text)

const field = document.getElementById("field");

field.oncut = (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString());
  selection.deleteFromDocument();
  event.preventDefault();
};

Selection moves to clipboard and leaves the field

const editor = document.getElementById("editor");
const out = document.getElementById("out");

editor.addEventListener("cut", () => {
  const len = document.getSelection().toString().length;
  out.textContent = "Cut " + len + " character(s)";
});

Cut 8 character(s)

const field = document.getElementById("field");

field.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  const text = selection.toString().trim();
  event.clipboardData.setData("text/plain", text);
  selection.deleteFromDocument();
  event.preventDefault();
});

spaced text (without leading/trailing spaces)

const secret = document.getElementById("secret");
const out = document.getElementById("out");

secret.addEventListener("cut", (event) => {
  event.preventDefault();
  out.textContent = "Cut disabled in this demo field.";
});

Cut disabled in this demo field.

🚀 Common Use Cases

• Normalizing cut text (uppercase, trim) before it hits the clipboard.
• Cutting a plain-text version of a rich selection.
• Logging when users cut content from an editor.
• Softly blocking cut on a demo field (with clear UX).
• Keeping cut/copy/paste handlers consistent in a custom editor.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Cancelling default cut also cancels document removal—delete manually if needed.
• Synthetic cut events do not update the clipboard or the document by themselves.
• Related learning: copy, dblclick, addEventListener(), JavaScript hub.

💡 Best Practices