Для виконання копіювання даних з буферу використаємо метод document.execCommand() так як Clipboard не усі браузери підтримують.
Даний метод не дає 100% гарантії кросбраузерної роботи з браузером, адже не всі браузери дозволяють команди: 'copy', 'paste', 'cut', але на мою думку найкращий варіант. Метод document.execCommand() підтримують більшість браузерів включаючи мобільних на відміну від Flash, та й Flash "помирає" з появою HTML5.
Деякі браузери або блокують команду 'copy' або лише виконують на подію користувача onclick тощо.
Для копіювання, вирізання тексту за допомогою document.execCommand() необхідно текст щоб текст був виділений.
Копіюємо текст елементу
Для копіювання тексту з необхідного елементу його спочатку потрібно виділити, а потім виконати команду "copy":
function copyTextElement(id){
//створюємо об'єкт Selection
var selection = window.getSelection();
//виділяємо текст елементу
selection.selectAllChildren(document.querySelector(id));
document.execCommand('copy');
selection.removeAllRanges();
}
copyTextElement('#test');
Функція яка копіює вказаний текст в буфер обміну:
function copyText(text){
var el=document.createElement('input');
try{
el.value=text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
}finally{
el.parentElement.removeChild(el);
}
}
copyText('http://яваскрипт.укр/');
Вдосконалимо функції запам'ятавши активний елемент і передаємо йому фокус після копіювання тексту.
function copyText(text){
var el=document.createElement('input'),
actEl=document.activeElement;
try{
el.value=text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
}finally{
document.body.removeChild(el);
actEl.focus();
}
}
copyText('http://яваскрипт.укр/');