Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скопировать текст в буфер обмена (https://javascript.ru/forum/dom-window/76749-skopirovat-tekst-v-bufer-obmena.html)

Igorsrt 09.02.2019 20:57

Скопировать текст в буфер обмена
 
Здравствуйте!
Есть скрипт:
<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 работает корректно. Но в Мозиле, почему-то, копирует весь текст полностью.
Сам контент находится во всплывающем окне - возможно поэтому что-то конфликтует, потому что сейчас просто запустил код выше (без модального окна) - скопировало нормально... что делать? (

Malleys 09.02.2019 21:44

Ваш пример работает идеально, вот ещё один способ копирования при помощи Clipboard API

Igorsrt 10.02.2019 07:37

но, тем не менее, в мозиле работает некорректно (
Еще заметил такую деталь, что если несколько раз нажать на кнопку (2 или более), то копируется содержимое нужного дива (id="cont"), а если только один - то все что есть во всплывающем окне...

Igorsrt 10.02.2019 09:22

добавил еще одну очистку выделения в начало скрипта
//очистим выделение текста, чтобы пользователь "не парился"
  window.getSelection().removeAllRanges();


Вроде заработало :)


Часовой пояс GMT +3, время: 18:49.