Копировать выделение в буфер обмена работает только один раз

У меня есть этот JS-код, в котором вы можете просто передать идентификатор элемента, и он скопирует текст из этого элемента. Однако, когда у меня есть несколько фрагментов на странице и я хочу скопировать более одного, это не сработает.

При загрузке первой страницы я могу скопировать один фрагмент, каждый фрагмент после этого копируется неправильно, нужно ли очищать буфер обмена от первого фрагмента?

function copy_snippet(snippet) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(snippet));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(snippet));
    window.getSelection().addRange(range);
    document.execCommand("copy");
  }
}
<div id = "1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tempus lacus, at congue augue. Vivamus nisl diam, ornare non justo vel, pulvinar gravida magna. Nullam posuere pharetra felis, sit amet viverra ex bibendum ut. Cras hendrerit tempor metus
  ut interdum. Suspendisse potenti. Etiam mi nunc, lacinia non justo vel, eleifend lobortis lectus. Morbi nulla diam, volutpat quis mauris ut, ultrices venenatis massa.
</div>
<button onclick = "copy_snippet('1');">Copy</button>

<br /><br />

<div id = "2">
  Vestibulum est arcu, porttitor a leo in, rhoncus mattis elit. In hac habitasse platea dictumst. Praesent vitae felis vitae risus ornare mattis. Maecenas ac condimentum lorem. Proin ornare nisi non sapien accumsan, quis suscipit est pellentesque. Sed enim
  purus, auctor sit amet tincidunt id, convallis a eros. Aenean a rhoncus orci. Pellentesque consequat ligula tincidunt semper varius.
</div>
<button onclick = "copy_snippet('2');">Copy</button>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
173
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Дело не в том, что вам нужно очистить буфер обмена, а в том, что вам нужно очистить выделение. Это описано в этом ответе:

Очистить выделение текста с помощью JavaScript

Я внес изменения в ваш фрагмент, и он работает (по крайней мере, для меня на хроме)

function copy_snippet(snippet){

    if (document.selection){
        document.selection.empty();
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(snippet));
        range.select().createTextRange();
        document.execCommand("copy");
    }else if (window.getSelection){
        if (window.getSelection().empty) {  // Chrome
          window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) {  // Firefox
          window.getSelection().removeAllRanges();
        }
        var range = document.createRange();
        range.selectNode(document.getElementById(snippet));
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
}
<div id = "1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tempus lacus, at congue augue. Vivamus nisl diam, ornare non justo vel, pulvinar gravida magna. Nullam posuere pharetra felis, sit amet viverra ex bibendum ut. Cras hendrerit tempor metus ut interdum. Suspendisse potenti. Etiam mi nunc, lacinia non justo vel, eleifend lobortis lectus. Morbi nulla diam, volutpat quis mauris ut, ultrices venenatis massa.
</div>
<button onclick = "copy_snippet('1');">Copy</button>

<br /><br />

<div id = "2">
Vestibulum est arcu, porttitor a leo in, rhoncus mattis elit. In hac habitasse platea dictumst. Praesent vitae felis vitae risus ornare mattis. Maecenas ac condimentum lorem. Proin ornare nisi non sapien accumsan, quis suscipit est pellentesque. Sed enim purus, auctor sit amet tincidunt id, convallis a eros. Aenean a rhoncus orci. Pellentesque consequat ligula tincidunt semper varius.
</div>
<button onclick = "copy_snippet('2');">Copy</button>

Другие вопросы по теме