Textarea Click Selection and Copy Demo

Click the left textarea. Its text is selected and, when clipboard access is allowed, copied. You can then paste into the textarea on the right. The complete source remains available below, as in the original demo.

Return to tutorial on textarea onclick selection all

JavaScript

const sourceText = document.getElementById('t1');
const destinationText = document.getElementById('t2');
const copyMessage = document.getElementById('my_msg');
sourceText.addEventListener('click', async () => {
  sourceText.focus();
  sourceText.select();
  try {
    await navigator.clipboard.writeText(sourceText.value);
    copyMessage.textContent = 'Text copied. Paste it into the textarea on the right.';
    destinationText.focus();
  } catch (error) {
    copyMessage.textContent = 'Text selected. Use Ctrl+C or Command+C, then paste on the right.';
  }
});

HTML

<div class="row">
  <div class="col-md-4">
    <textarea name="type" id="t1" rows="5">This text you can select all by clicking here</textarea>
  </div>
  <div id="my_msg" aria-live="polite"></div>
  <textarea id="t2" name="t2" rows="5"></textarea>
</div>