如何设置textarea仅支持复制粘贴，禁止手动编辑？

Hey there! If you need a textarea that only lets users copy and paste content (no manual typing allowed), here are a few solid approaches to make that happen:

Approach 1: Use readonly Attribute + Event Listeners #

The readonly attribute prevents manual typing by default, but it also blocks paste operations. We can fix that by listening for the paste event to allow content insertion, while still blocking unwanted keyboard inputs.

<textarea id="pasteOnlyTextarea" readonly></textarea>

<script>
const textarea = document.getElementById('pasteOnlyTextarea');

// Allow paste operations
textarea.addEventListener('paste', (e) => {
  e.preventDefault();
  // Get pasted content from clipboard
  const pastedContent = (e.clipboardData || window.clipboardData).getData('text');
  // Update the textarea value with pasted content
  textarea.value = pastedContent;
});

// Allow copy shortcuts, block all other keyboard inputs
textarea.addEventListener('keydown', (e) => {
  // Let Ctrl+C/Command+C work for copying
  if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
    return;
  }
  // Block every other key press
  e.preventDefault();
});
</script>

This method keeps the textarea in a "readonly" state visually, but explicitly enables paste functionality while allowing users to copy the content inside.

Approach 2: Pure JavaScript Input Control #

If you don't want to rely on the readonly attribute, you can directly filter input events to only allow paste operations.

<textarea id="pasteOnlyTextarea"></textarea>

<script>
const textarea = document.getElementById('pasteOnlyTextarea');

// Block all input except pasting
textarea.addEventListener('beforeinput', (e) => {
  // Only allow paste actions
  if (e.inputType !== 'insertFromPaste') {
    e.preventDefault();
  }
});

// Allow copy shortcuts, block other keyboard actions
textarea.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
    return;
  }
  // Block cut (Ctrl+X) and other typing keys
  e.preventDefault();
});
</script>

The beforeinput event lets us check the type of input being made—we only let paste operations go through, stopping manual typing, drag-and-drop text, etc.

Bonus: Style for Better User Experience #

To make it clear to users that they can't type in the textarea, add some CSS to match the visual style of a readonly element:

#pasteOnlyTextarea {
  background-color: #f5f5f5;
  cursor: default;
  border: 1px solid #ddd;
}

This gives users a visual cue that the field isn't meant for manual editing, reducing confusion.

Edge Case Note #

If you want to restrict right-click actions like cut or delete, you can add a contextmenu event listener to disable those options, but the above methods already cover the most common scenarios of unwanted manual edits.

内容的提问来源于stack exchange，提问作者Abhishek Singh