Как вставить текст

Гарри Теодулу

Современный способ

Использование API асинхронного буфера обмена

Для программного чтения текста из буфера обмена пользователя, например, после нажатия кнопки, можно использовать метод readText() из API асинхронного чтения из буфера обмена . Если разрешение на чтение из буфера обмена еще не предоставлено, вызов ` navigator.clipboard.readText() запросит его при первом вызове метода.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

Browser Support

  • Chrome: 66.
  • Край: 79.
  • Firefox: 125.
  • Safari: 13.1.

Source

Классический способ

Использование document.execCommand()

С помощью метода document.execCommand('paste') вы можете вставить содержимое буфера обмена в точку вставки (текущий сфокусированный HTML-элемент). Метод execCommand возвращает логическое значение, указывающее на успешность события paste . Однако этот метод имеет ограничения, например, поскольку он синхронный, вставка больших объемов данных может заблокировать страницу.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

Browser Support

  • Chrome: 1.
  • Край: 12.
  • Firefox: 69.
  • Safari: 1.3.

Source

Прогрессивное улучшение 

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

Дополнительная информация

Демо

HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to paste text</title>
  </head>
  <body>
    <h1>How to paste text</h1>
    <p>
      <button type="button">Paste</button>
    </p>
    <textarea></textarea>
  </body>
</html>

CSS 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS 


        const pasteButton = document.querySelector('button');

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText()
    document.querySelector('textarea').value += text;
    console.log('Text pasted.');
  } catch (error) {
    console.log('Failed to read clipboard. Using execCommand instead.');
    document.querySelector('textarea').focus();
    const result = document.execCommand('paste')
    console.log('document.execCommand result: ', result);
  }
});