Такая задача возникает не часто, но если вы заботитесь о пользователе, и помогаете ему скопировать в буфер обмена нужную информацию — то пользователь будет вам признателен. Так вы заработаете ещё один плюсик в копилку «юзабилити».
Разберем ключевые моменты задачи.
Постановка задачи
Есть какой то участок html кода, ограниченный известным контейнером, это может быть текст в textarea или внутри div, который нужно передать в буфер обмена по событию, инициированному пользователем. Пусть это будет нажатие (click) на кнопку.
Вот пример html кода:
|
1 2 |
<textarea id="cont">Произвольный текст</textarea> <button id="userButton">Копировать</button> |
Реализация
Описанные ниже способ хоть и работает, но считается устаревшим после внедрения Clipboard API — читайте о его использовании тут.
Мы будем использовать функцию window.getSelection(), которая предоставляет доступ к объекту выделения текста на странице. А также функцию document.execCommand(), чтобы выполнить собственно перенос скопированного участка в буфер обмена. Потом мы будем снимать выделение текста, так что пользователь даже и не заметит, что мы что то выделяли :)
Обойдемся без jQuery, только чистым javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//цепляем событие на onclick кнопки var button = document.getElementById('userButton'); button.addEventListener('click', function () { //нашли наш контейнер var ta = document.getElementById('cont'); //производим его выделение var range = document.createRange(); range.selectNode(ta); window.getSelection().addRange(range); //пытаемся скопировать текст в буфер обмена try { document.execCommand('copy'); } catch(err) { console.log('Can`t copy, boss'); } //очистим выделение текста, чтобы пользователь "не парился" window.getSelection().removeAllRanges(); }); |
Здравствуйте,
Сделал по аналогии, но почему-то копируется не тот текст, который должен, а тот, на который происходит клик.
Подскажите, пожалуйста, что я делаю не так?
//цепляем событие на onclick кнопки
var button = document.getElementById(‘copy-upc’);
button.addEventListener(‘click’, function () {
//нашли наш контейнер
var ta = document.getElementById(‘upc’);
//производим его выделение
var range = document.createRange();
range.selectNode(ta);
window.getSelection().addRange(range);
//пытаемся скопировать текст в буфер обмена
try {
document.execCommand(‘copy’);
} catch(err) {
console.log(‘Can`t copy’);
}
//очистим выделение текста, чтобы пользователь «не парился»
window.getSelection().removeAllRanges();
});
Судя по js коду, вроде всё в порядке. По логике, eсть два контейнера, один для кнопки — #copy-upc, а второй для копирования — #upc.
Может что то в HTML коде не так? К примеру, контейнеры с одним и тем же ID? Попробуйте в конце не снимать выделение — будет видно, что действительно выделяется на странице и соответственно копируется в буфер.
create
copy
function makeF() {
var c=document.getElementById(‘countri’).value;
document.getElementById(‘tex’).value=»function «+c+»()»+»{«+»\n»+»}»;
}
function copyF() {
var s = document.getElementById(«tex»).value;
var r=document.createRange();
r.selectNode(s);
window.getSelection().addRange(s);
document.execCommand(‘copy’);
}
и не работает, ничего не выделяет вообще, или это к тексту в textarea не применимо?
Доброго времени суток.
Есть задача: в серверном скрипте получить данные из буфера обмена и передать их в браузер. Возможно ли это сделать с помощью javascript или требуется что-либо другое?
Здравствуйте! Почему то, если просто покликать мышкой по другим местам на странице (в том числе пустым), то потом ничего не копирует. А если кликнуть потом по месту которое нужно выделить, то в консоли выдает ошибку «The behavior that Selection.addRange() merges existing Range and the specified Range was removed.»
В общем нужно просто перед выделением снять старое выделение
window.getSelection().addRange(range);
Спасибо, всё работает!
По желанию, в конец скрипта можно добавить
alert(«Текст скопирован!»);
Здравствуйте!
Может кто подскажет, как сделать кнопку вставить скопированный текст из буфера обмена?
Немного изменил ваш скрипт, чтобы можно было копировать из разных мест на странице, не плодя клонов одной и той же функции:
<a href=»#» rel=»nofollow»>Копировать из первого дива</a>
<a href=»#» rel=»nofollow»>Копировать из второго дива</a>
111
222
jQuery(‘.js_copy_to_clipboard’).click(function() {
var where_to_copy = jQuery(this).attr(«data-copy-from-id»);
var what_to_copy = document.getElementById(where_to_copy);
var range = document.createRange();
range.selectNode(what_to_copy);
window.getSelection().addRange(range);
try { document.execCommand(‘copy’);
} catch(err) { console.log(‘Не удалось скопировать текст в буфер обмена!’); }
window.getSelection().removeAllRanges();
jQuery(this).text(‘Скопировано!’);
});
Но тогда, если сначала скопировал по одной ссылке, затем по другой, второй раз не копировалось и в консоли возникала ошибка:
Discontiguous selection is not supported.
Проблема решилась добавлением ещё раз этой строчки
window.getSelection().removeAllRanges();
в начало скрипта:
jQuery(‘.js_copy_to_clipboard’).click(function() {
window.getSelection().removeAllRanges(); // вот она!
var where_to_copy = jQuery(this).attr(«data-copy-from-id»);
var what_to_copy = document.getElementById(where_to_copy);
var range = document.createRange();
range.selectNode(what_to_copy);
window.getSelection().addRange(range);
try { document.execCommand(‘copy’);
} catch(err) { console.log(‘Не удалось скопировать текст в буфер обмена!’); }
window.getSelection().removeAllRanges();
jQuery(this).text(‘Скопировано!’);
});
Не копируются переносы строк \n