Как скопировать текст кнопки?

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

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  document.execCommand("copy");
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

Когда я console.log copyText, он отображает текст с кнопки, но мой текст никогда не копируется.

Ты знаешь почему ?

document.getElementById('myButton').innerText

Amit Baranes 22.05.2019 15:41

Возможный дубликат Как скопировать в буфер обмена в JavaScript?

Mike G 22.05.2019 15:42

@mikeTheLiar это работает, если я нажимаю кнопку и копирую текст из ввода, но в моем случае я хочу скопировать текст из той же кнопки, на которую я нажимаю.

Nicolas Twil 22.05.2019 15:43

внутренний текст не внутреннийHtml

Amit Baranes 22.05.2019 15:44

Верхний ответ там говорит: «Не ожидайте, что команды, связанные с буфером обмена, будут работать, пока вы тестируете код в консоли». У вас открыта консоль разработчика?

Mike G 22.05.2019 15:44

Вы назначаете текст своей кнопки переменной, а затем выполняете команду копирования, но не выделяете текст. Вы упускаете эту важную часть из примера, на который вы ссылаетесь. Например. copyText.select();

j08691 22.05.2019 15:44

В нем также говорится: «document.queryCommandEnabled('copy') вернет true, если document.execCommand('copy') будет успешным, если его вызвать сейчас». Что возвращает этот метод при выполнении в этом методе?

Mike G 22.05.2019 15:46

@ j08691 j08691, когда я добавляю copyText.select();, отображается эта ошибка: copyText.select is not a function

Nicolas Twil 22.05.2019 15:50
.select() работает для элементов ввода, например, на сайте, на который вы ссылаетесь, а не на html/текст кнопки. Я хочу сказать, что вам нужно выбрать текст, который вы хотите скопировать. Вы этого не делаете.
j08691 22.05.2019 15:51

@MikeTheLiar, когда я console.log document.execCommand('copy'), возвращает true и undefined.

Nicolas Twil 22.05.2019 15:58
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
10
362
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваша проблема в том, что вы сохраняете только value из button, но ничего не выбираете, поэтому ничего не будет скопировано в буфер обмена.

Вам нужно поместить этот контент в inputи выберите его значение с помощью .select(), чтобы его можно было скопировать:

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  
  var input = document.createElement("input");
  input.value = copyText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input); 
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

Плохо, что я console.log внутри своего скрипта, и он отображает: <input>; тогда, если я console.log input.select(), он отобразит: undefined

Nicolas Twil 22.05.2019 16:03

@NicolasTwil Проверьте мой отредактированный код, он работает, если вы нажмете кнопку, а затем вставите текст куда-нибудь.

cнŝdk 22.05.2019 16:05
function copyClipboard() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(document.getElementById("myButton").innerHTML).select();
    document.execCommand("copy");
    $temp.remove();
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

Я хочу скопировать текст с кнопки, а не с ввода или p :/

Nicolas Twil 22.05.2019 15:59

@NicolasTwil, проверьте мой отредактированный код, он работает с кнопки.

Abbuchu 22.05.2019 17:07

Другие вопросы по теме