Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095

Дублирование текста в буффере обмена

06.07.2018, 13:11. Показов 2519. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток.

Написал небольшой плагинчик для браузера который выделяет текст для копирования в буффер обмена, но столкнулся с одной проблемой.
Есть следующий код.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div>
  <pre class="txt">Lorem ipsum dolor sit amet.</pre>
</div>
<div>
  <pre class="txt">Veniam aliquid nisi eligendi quisquam.</pre>
</div>
<div>
  <pre class="txt">Vel, unde ad quidem perspiciatis!</pre>
</div>
 
<script>
  var txtArr = document.querySelectorAll('.txt')
for (var i = 0; i < txtArr.length;i++){
var btn = document.createElement('button');
btn.textContent = 'Сopy text to clipboard';
btn.addEventListener('click', selectText)
txtArr[i].parentNode.insertBefore(btn,txtArr[i]);
}
 
function selectText(e){
  e.preventDefault();
  window.getSelection().removeAllRanges();
  var sel = this.nextElementSibling;
  var range = document.createRange();
  range.selectNode(sel);
  window.getSelection().addRange(range);
}
</script>
Все выделяется, но при вставке скопированного текста почему то дублируются несколько первых слов.
Причем дублированние порисходит только если в html использован тег pre, если его заменить на p или code, или же вставлять кнопку внутрь pre и заменить var sel = this.nextElementSibling; на var sel = this.parentNode;, то текст копируется без дублирования. Во втором случае разумеется копируется еще и содержимое текста кнопки, да и сама кнопка располагается неудобно, но не в этом суть.

Проблему с дублированием решил пока так:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  var txtArr = document.querySelectorAll('.txt');
for (var i = 0; i < txtArr.length; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Сopy text to clipboard';
    btn.addEventListener('click', selectText);
    txtArr[i].parentNode.insertBefore(btn, txtArr[i]);
}
var sel;
 
function selectText(e) {
    e.preventDefault();
    sel = this.nextElementSibling;
    var range = document.createRange();
    range.selectNode(sel);
    window.getSelection().addRange(range);
    document.addEventListener('copy', copyText)
 
}
 
function copyText(e) {
    var copiedText = sel.textContent;
    e.clipboardData.setData('text/plain', copiedText);
    document.execCommand('copy');
    e.preventDefault();
    window.getSelection().removeAllRanges();
    document.removeEventListener('copy', copyText);
    sel = null;
}
но может кто более изящный способ подскажет
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
06.07.2018, 13:11
Ответы с готовыми решениями:

Кракозябры в буффере обмена
Есть известная проблема с копированием через буфер обмена, когда скопированный русский текст превращается при вставке в...

Дублирование текста
Уважаемые форумчане, нужна помощь в борьбе с дублированием текста на сайте. Вот моя ситуация: В html-станицу встроен php-скрипт....

Дублирование текста
у меня есть textarea в котором я ввожу текст и есть еще один div в котором текст дублируется (тегов естественно не видно уже), делаю так ...

10
249 / 162 / 68
Регистрация: 10.12.2017
Сообщений: 558
06.07.2018, 14:46
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  var txtArr = document.querySelectorAll('.txt')
  for (let i = 0; i < txtArr.length; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Сopy text to clipboard';
    btn.addEventListener('click', (e) => selectText(e, txtArr[i]))
    txtArr[i].parentNode.insertBefore(btn, txtArr[i]);
  }
 
  function selectText(e, txt) {
    e.preventDefault();
    window.getSelection().removeAllRanges();
    var range = document.createRange();
    range.selectNode(txt.firstChild);
    window.getSelection().addRange(range);
  }
</script>
Добавлено через 6 минут
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
document.querySelectorAll('.txt').forEach((txt, idx) => {
    var btn = document.createElement('button')
    btn.textContent = 'Copy to clipboard'
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      range.selectNode(txt.firstChild);
      window.getSelection().addRange(range);
    })
    txt.parentNode.insertBefore(btn, txt)
  })
1
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
06.07.2018, 16:34
Лучший ответ Сообщение было отмечено AlexZaw как решение

Решение

Evgen1337, AlexZaw, Не хочется Вас обоих расстраивать, но Ваши варики не работают. Текст выделился и только. Вы про document.execCommand('copy'); забыли И e.preventDefault() в обработке кнопки лишний, это ведь не сабмит. Плюс назначать в цикле несколько обработчиков не есть хорошо. Лучше делегировать событие родителю и ловить всплытие. Потому что все обработчики встанут в очередь(ну кроме разве что Web Workers) - о ней тоже нужно думать. Но вы и без моих соплей я думаю разберетесь.
Ну а это так, пригодится может кому - https://codepen.io/qwerty_wasd/pen/aKgaod
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="parent">
  <div>
    <pre class="txt">Lorem ipsum dolor sit amet.</pre>
  </div>
  <div>
    <pre class="txt">Veniam aliquid nisi eligendi quisquam.</pre>
  </div>
  <div>
    <pre class="txt">Vel, unde ad quidem perspiciatis!</pre>
  </div>
  <label>Проверка
    <input type="text" style="width:90%;"/>
  </label>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let parentDiv=document.getElementById('parent'),        
    text=document.getElementsByClassName('txt');
const copyClipBoard=e=>{
  if (e.target.classList.contains('copyToCB')){
    let range = document.createRange();
    window.getSelection().removeAllRanges();
    range.selectNodeContents(e.target.nextElementSibling);
    window.getSelection().addRange(range);
    document.execCommand('copy');
  } 
}
[...text].forEach(e=>{
  let btn=document.createElement('button');
  btn.textContent='Copy';
  btn.className='copyToCB'
  e.parentNode.insertBefore(btn, e);
});
parentDiv.addEventListener('click',copyClipBoard);
window.onunload=()=>parentDiv.removeEventListener('click',copyClipBoard);
1
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
06.07.2018, 16:40  [ТС]
Спасибо.
Извиняюсь, но не написал сразу правильную разметку, у тегов <pre> тоже есть дети, т.е. структра такая:
HTML5
1
2
3
4
5
6
7
8
<div>
  <pre class="txt">
    <span>Lorem ipsum.</span>
    <span>Vero, hic.</span>
    <span>Quam, voluptatibus.</span>
    <span>Voluptatum, fugit!</span>
  </pre>
</div>
Количество span-ов, как вы понимаете не постоянно.

Да,и кто может объяснить почему вообще происходит дублирование?
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
06.07.2018, 16:48
AlexZaw,
Цитата Сообщение от AlexZaw Посмотреть сообщение
Да,и кто может объяснить почему вообще происходит дублирование?
разница в работе методов selectNodeContents и selectNode.
Цитата Сообщение от AlexZaw Посмотреть сообщение
но не написал сразу правильную разметку
я об этом подумал, методу selectNodeContents плевать на детей, он соберет весь контент - сходите еще раз в песочницу, я поправил верстку.
0
249 / 162 / 68
Регистрация: 10.12.2017
Сообщений: 558
06.07.2018, 16:51
Qwerty_Wasd, как скажешь , особо не загонялся, я всего лишь предложил как решить "дублирование" через firstChild, но все равно познавательно.
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
06.07.2018, 16:56  [ТС]
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
но Ваши варики не работают. Текст выделился и только
В каком смысле не работают? Выделяется, а копировать надо ручками уже. Так и задумано. Или я что то не понял?

Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
e.preventDefault() в обработке кнопки лишний, это ведь не сабмит.
Для данного кода да, лишний, но плагин писался для конкретного сайта в котором уже есть кнопки и при нажатии на кнопку копирования срабатывает сабмит, поэтому и стоит отмена.

Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Плюс назначать в цикле несколько обработчиков не есть хорошо. Лучше делегировать событие родителю и ловить всплытие.
Про это как то не подумал, спасибо что напомнил
Да, и спасибо за код, работает прекрасно, дальше допилю под свои нужды.
1
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
06.07.2018, 16:58
AlexZaw,
Цитата Сообщение от AlexZaw Посмотреть сообщение
Так и задумано. Или я что то не понял?
блииин. ну я этого не знал
0
249 / 162 / 68
Регистрация: 10.12.2017
Сообщений: 558
06.07.2018, 16:58
Цитата Сообщение от AlexZaw Посмотреть сообщение
В каком смысле не работают? Выделяется, а копировать надо ручками уже. Так и задумано. Или я что то не понял?
я тоже так сначала подумал
1
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
06.07.2018, 16:59  [ТС]
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
сходите еще раз в песочницу, я поправил верстку
Мой ответ Evgen1337, просто еще писался, когда был выложен код Еще раз спасибо
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
06.07.2018, 17:01
AlexZaw, всегда пожалуйста Хорошего дня
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
06.07.2018, 17:01
Помогаю со студенческими работами здесь

Дублирование текста на экране
Всем привет! Хочу продублировать всё, что отображается при работе программы на экране, в текстовом файле (включая нажатые клавиши). Как...

Дублирование текста с input в span
Здравствуйте! В java я не силен... Мне нужно, чтобы при вводе текста в определенный импут текст сразу же дублировался в соответствующий...

Дублирование и фильтрация текста в TextBox
Привет) Такое мне попалось задание, что то я не могу решить. Задание: Вводишь символы, и при вводе заглавной русской буквы вывести...

Плохое качество печати - грязное дублирование текста
Здравствуйте! Принтер HP LaserJet 5P. Стал грязно печатать. Заменил картридж на новый из нераспечатанной коробки. Качество печати не...

как убрать дублирование текста на каждом листе?
подскажите пожалуйста, как в Word 2007 сделать так, чтобы в документе название раздела было только на первом листе? оно у меня на каждом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
Контроль уникальности заводского номера - вариант №2
Maks 24.03.2026
В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++
8Observer8 24.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
Контроль уникальности заводского номера - вариант №1
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью в КА2. Данные берутся из регистра сведений, по которому настроено. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
anaschu 22.03.2026
e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
Программный отбор элементов справочника по группе
Maks 22.03.2026
Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа в КА2. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru