Скопировать текст в буфер обмена
Здравствуйте!
Есть скрипт:
<div class="wpb_wrapper">
<h4>Title h4</h4>
<h6><strong>Title h6</strong></h6>
<h5>Title h5</h5>
<p>Lorem ipsum — dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<div id="cont">XXXXXXXXXXXXX</div>
<p><button id="userButton" class="btn btn-alt btn-sm clicked">Copy text</button><br />
Lorem ipsum — dolor</p>
<p>Lorem ipsum — dolor sit amet, consectetuer adipiscing</p>
</div>
<script type="text/javascript">
//цепляем событие на 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');
}
//alert("text copied")
//очистим выделение текста, чтобы пользователь "не парился"
window.getSelection().removeAllRanges();
});
userButton.onclick = e => { userButton.classList.add("clicked");
userButton.insertAdjacentHTML('beforeend', '<div id="cpd">successfully copied</div>');
setTimeout(_=> cpd.remove(), 1000);
}
</script>
При нажатии на кнопку должен копироваться текст из дива id="cont". В браузере Chrome работает корректно. Но в Мозиле, почему-то, копирует весь текст полностью. Сам контент находится во всплывающем окне - возможно поэтому что-то конфликтует, потому что сейчас просто запустил код выше (без модального окна) - скопировало нормально... что делать? ( |
Ваш пример работает идеально, вот ещё один способ копирования при помощи Clipboard API
|
но, тем не менее, в мозиле работает некорректно (
Еще заметил такую деталь, что если несколько раз нажать на кнопку (2 или более), то копируется содержимое нужного дива (id="cont"), а если только один - то все что есть во всплывающем окне... |
добавил еще одну очистку выделения в начало скрипта
//очистим выделение текста, чтобы пользователь "не парился" window.getSelection().removeAllRanges(); Вроде заработало :) |
| Часовой пояс GMT +3, время: 22:25. |