zenorocha/clipboard.js · error · Error

Invalid "target" attribute. You can't cut text from elements

Error message

Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes

What it means

Thrown when `action` is 'cut' and the target element has either a `readonly` or `disabled` attribute. Cut both selects AND clears the source value, which requires the field to be user-editable; a readonly/disabled field cannot be modified, so the cut cannot be completed and the library aborts before partial state.

Source

Thrown at src/actions/default.js:31

  // Sets the `action` to be performed which can be either 'copy' or 'cut'.
  if (action !== 'copy' && action !== 'cut') {
    throw new Error('Invalid "action" value, use either "copy" or "cut"');
  }

  // Sets the `target` property using an element that will be have its content copied.
  if (target !== undefined) {
    if (target && typeof target === 'object' && target.nodeType === 1) {
      if (action === 'copy' && target.hasAttribute('disabled')) {
        throw new Error(
          'Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'
        );
      }

      if (
        action === 'cut' &&
        (target.hasAttribute('readonly') || target.hasAttribute('disabled'))
      ) {
        throw new Error(
          'Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes'
        );
      }
    } else {
      throw new Error('Invalid "target" value, use a valid Element');
    }
  }

  // Define selection strategy based on `text` property.
  if (text) {
    return ClipboardActionCopy(text, { container });
  }

  // Defines which selection strategy based on `target` property.
  if (target) {
    return action === 'cut'
      ? ClipboardActionCut(target)
      : ClipboardActionCopy(target, { container });

View on GitHub (pinned to 899378dee9)

Solutions

Confirm the field is actually meant to be emptied — if not, switch the trigger's action to 'copy' instead of 'cut'.
Remove the `readonly`/`disabled` attribute from the target before the cut runs (in a click handler or before calling ClipboardActionDefault).
Rework the UX so cut is only enabled when the field is editable — disable the cut button itself when the target is readonly/disabled.
Use the `text` callback path with manual clearing afterwards if you must read from a readonly field (note: you still cannot auto-clear it via this library).

Example fix

// before
<input id="note" value="scratch" readonly />
<button data-clipboard-action="cut" data-clipboard-target="#note">Cut</button>
// after
<input id="note" value="scratch" />
<button data-clipboard-action="cut" data-clipboard-target="#note">Cut</button>

Defensive patterns

Strategy: validation

Validate before calling

function canCutFrom(el) {
  if (!el || el.nodeType !== 1) return false;
  return !el.hasAttribute('readonly') && !el.hasAttribute('disabled');
}
const el = document.querySelector('#note');
if (!canCutFrom(el)) {
  cutBtn.disabled = true; // don't attempt a doomed cut
} else {
  cutBtn.disabled = false;
}

Type guard

/**
 * @param {Element} el
 * @returns {boolean}
 */
function isCuttableElement(el) {
  if (!(el instanceof Element) || el.nodeType !== 1) return false;
  return !el.hasAttribute('readonly') && !el.hasAttribute('disabled');
}

Try / catch

try {
  ClipboardActionDefault({ action: 'cut', target: el });
} catch (err) {
  if (/can't cut text from elements/.test(err.message)) {
    console.warn('Target is not editable; falling back to copy', el);
    ClipboardActionDefault({ action: 'copy', target: el });
  } else {
    throw err;
  }
}

Prevention

Tie the cut button's `disabled` state to the target's readonly/disabled state so an invalid cut can never be attempted.
Confirm with the product whether the field is truly meant to be cleared — most readonly fields should be copied, not cut.
Run a guard check on focus/click before invoking the clipboard action.
When field state flips (e.g., lock-after-save), re-evaluate bound actions rather than leaving stale bindings.

When it happens

Trigger: Setting `data-clipboard-action="cut"` on a trigger whose `data-clipboard-target` points at `<input readonly>` or `<input disabled>`; calling `ClipboardActionDefault({ action: 'cut', target: el })` where `el` is a readonly textarea; a dynamic `action: () => 'cut'` applied to a field that is readonly in some states but not others.

Common situations: Move-to-clipboard UX (cut) on inputs that are conditionally readonly (locked records, review-mode forms); admin tools where fields flip to readonly after approval but cut buttons remain bound; mixing copy and cut triggers on the same field without coordinating its editable state; SSR templates that render fields as readonly by default.

Related errors

AI-assisted analysis of zenorocha/clipboard.js@899378dee9 (2026-08-13). Data as JSON: /api/errors/a76380ba14742c1a. Report an issue: GitHub.