Блог

Главная - Вопросы по программированию - Скопируйте содержимое тега в буфер обмена на вкл Vue.js Приложение

Скопируйте содержимое тега в буфер обмена на вкл Vue.js Приложение

#javascript #vue.js #select #google-chrome-extension #copy

Вопрос:

Я работаю над приложением vue с расширением chrome, где моя цель-скопировать содержимое раздела предварительных тегов в буфер обмена одним нажатием кнопки. Я определил идентификатор элемента для тега pre, чтобы я мог захватить содержимое с помощью метода copyToClipboard (). Мой код выглядит так:

 <template>
        <div>
          <button @click="copyToClipboard()">Copy To Clipboard</button>
        </div>

Метод определяется следующим образом:

 methods : {
copyToClipboard() {
      const textToCopy = document.getElementById('textToBecopied')
      textToCopy.select()
      document.execCommand('copy')
    }
}

Я думаю, что метод выполняется правильно, но функция, которую я использую как .select, выдает ошибку, что это не функция. У кого-нибудь есть идея получше, чтобы достичь того, что я ищу?

введите описание изображения здесь

Ответ №1:

HTMLInputElement.select() Метод выбирает весь текст в <textarea> элементе или в <input> элементе, включающем текстовое поле.

document.getElementById('textToBecopied') — это <pre> стихия.

Используйте Node.textContent , чтобы получить текст. И для копирования в буфер обмена — API буфера обмена.

Комментарии:

1. да «document.getElementById(‘textToBecopied’)» — это содержимое тега <pre>, которое я сохраняю в переменной textToCopy. Не уверен, где вы предлагаете использовать Node.textContent

2. @jfr01 , «document.getElementById(‘textToBecopied’)» — это не содержимое тега <pre>, а сам тег, у которого нет метода .select ().

Ответ №2:

Я решил эту проблему, получив содержимое предварительного тега и скопировав его в фиктивную текстовую область, а затем смог использовать метод выбора, а также функцию копирования в буфер обмена.

 copyToClipboard() {
  const copyText = document.getElementById('textToBecopied').textContent
  const textArea = document.createElement('textarea')
  textArea.textContent = copyText
  document.body.append(textArea)
  textArea.select()
  document.execCommand('copy')
}
Метки: