Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.02.2019, 20:57
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Скопировать текст в буфер обмена
Здравствуйте!
Есть скрипт:
<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 работает корректно. Но в Мозиле, почему-то, копирует весь текст полностью.
Сам контент находится во всплывающем окне - возможно поэтому что-то конфликтует, потому что сейчас просто запустил код выше (без модального окна) - скопировало нормально... что делать? (
Ответить с цитированием
  #2 (permalink)  
Старый 09.02.2019, 21:44
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Ваш пример работает идеально, вот ещё один способ копирования при помощи Clipboard API
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2019, 07:37
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

но, тем не менее, в мозиле работает некорректно (
Еще заметил такую деталь, что если несколько раз нажать на кнопку (2 или более), то копируется содержимое нужного дива (id="cont"), а если только один - то все что есть во всплывающем окне...
Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2019, 09:22
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

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


Вроде заработало
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрывающийся список с объемными текстами morzer Общие вопросы Javascript 4 11.07.2016 14:54
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03