Как скопировать данные из буфера обмена в значение input

Question

По нажатию на кнопку должен быть вставлен текст из буфера обмена, но выходит ошибка Cannot read property "clipboardData" of undefined.

const pasteFromBuffer = document.querySelector('.paste-button');
const textareaPaste = document.querySelector('.input');

function handlePaste(event) {
  const clipboardData = event.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData('Text');
  console.log(pastedData);
  textareaPaste.innerText = pastedData;
}

pasteFromBuffer.addEventListener('click', handlePaste);

<input class="input"></input>
<button class="paste-button">Paste</button>

Answer 1

Вы можете воспользоваться clipboard API, сделав вот так:

const pasteFromBuffer = document.querySelector( ".paste-button")
const textareaPaste = document.querySelector(".input")

const handlePaste = async event => {
    const clipboardData = await navigator.clipboard.readText()
    textareaPaste.value = clipboardData
    console.log(textareaPaste.value)
}

pasteFromBuffer.addEventListener("click", handlePaste, false)

Имейте ввиду что большинство браузеров запросят у пользователя подтверждения прав доступа к данным clipboard.

Так же этот метод не будет работать из консоли, так как требует непосредственного действия пользователя, например, нажатия на кнопку.

БЛОГ НА HUSL

Как скопировать данные из буфера обмена в значение input

Ответы (1 шт):