JS - Копирование в буфер обмена

185
12 апреля 2018, 12:45

Как скопировать данные из атрибута data-s="" в буфер обмена?

Answer 1

Доступ к data-* получить легко: У элементов есть свойство dataset, у которого ключами установлены существующие у элемента атрибуты data-*.

document.querySelector('#myElement').dataset.s;

С копированием сложно, но возможно.
Вот функция, которая уже довольно давно исправно работает (используем с осторожностью, поддержка может хромать, хотя основные браузеры последних версий вроде работают):

function copy(str){ 
  let tmp   = document.createElement('INPUT'), // Создаём новый текстовой input 
      focus = document.activeElement; // Получаем ссылку на элемент в фокусе (чтобы не терять фокус) 
 
  tmp.value = str; // Временному input вставляем текст для копирования 
 
  document.body.appendChild(tmp); // Вставляем input в DOM 
  tmp.select(); // Выделяем весь текст в input 
  document.execCommand('copy'); // Магия! Копирует в буфер выделенный текст (см. команду выше) 
  document.body.removeChild(tmp); // Удаляем временный input 
  focus.focus(); // Возвращаем фокус туда, где был 
} 
 
document.addEventListener('DOMContentLoaded', e => { 
  let input = document.querySelector('#input'), 
      bCopy = document.querySelector('#bCopy'), 
      log   = document.querySelector('#log'); 
   
  bCopy.addEventListener('click', e => { 
    if(input.value){ 
      try{ 
        copy(input.value); 
        log.style.color = 'green'; 
        log.innerHTML = 'Скопировано!'; 
      }catch(e){ 
        log.style.color = 'red'; 
        log.innerHTML = 'Ошибка!'; 
      } 
    } 
  }); 
});
Введите текст: <input type='text' id='input' /> <input type='button' id='bCopy' value='Copy!' /><br /> 
<span id='log'></span>

Answer 2

Достать данные из аттрибута и получить их в JS - легко. Выбирайте из вариантов:

$('selector').attr('data-s');
$('selector').data('s');
$('selector').data().s;

В вот поместить эти данные в буфер обмена - на JS без дополнительных средств типа flash - никак. JS не имеет доступа к буферу обмена (и слава богу!)

READ ALSO
Почему Heroku не работает стабильно?

Почему Heroku не работает стабильно?

Я установил телеграм бот на Heroku, но он работает не стабильно, 5 минут работает 20-30 минут зависаетНо когда открыта страница Heroku с проектом всё...

218
Заполнить свойство через цикл

Заполнить свойство через цикл

Получаю массив со значениямиНужно все значения вывести на график

177
Найти из одного Массива данные цифры

Найти из одного Массива данные цифры

Если что-то непонятно, попробую объяснить по-другому

173
Как в манифесте запросить работу на системных страницах?

Как в манифесте запросить работу на системных страницах?

Есть ли возможность указать все страницы, включая системные, в content_scripts? Сейчас использую "matches": ["<all_urls>"], на всех обычных страницах всё...

170