Блог

Главная - Вопросы по программированию - Скрипт, который копирует текст в буфер обмена при нажатии на текст

Скрипт, который копирует текст в буфер обмена при нажатии на текст

#javascript #html

#javascript #HTML

Вопрос:

У меня вопрос о следующем скрипте:

 function copyElementText(id) {
        var text = document.getElementById(id).innerText;
        var elem = document.createElement("textarea");
        document.body.appendChild(elem);
        elem.value = text;
        elem.select();
        document.execCommand("copy");
        document.body.removeChild(elem);
        console.log('Copy made');
    } 
     <font id="text" onclick="copyElementText(this.id)">Copy this text</font>

Этот скрипт копирует текст в буфер обмена при нажатии на него.

Я могу использовать это только один раз. Мне нужно это несколько раз в HTML-файле. Как я могу настроить скрипт, чтобы я мог использовать его больше раз?

Спасибо!

Комментарии:

1. Почему вы думаете, что он выполняется только один раз? Как вы можете видеть, ваш код отлично работает в SO Snippet. И вы можете использовать его для других элементов, просто убедитесь, что ваш идентификатор уникален

2. Позвольте мне задать вам вопрос. Почему бы вам не пометить ответы как разрешенные после того, как вы получите эти ответы? Все ваши вопросы, которые вы задаете, не являются закрытыми.

3. Акцент на @s.kuznetsov, если / когда на ваш вопрос будет дан ответ, вы должны принять правильный ответ, нажав на зеленую галочку рядом с ним 🙂

Ответ №1:

  1. Во-первых, ваш код отлично работает с одним текстом.
  2. Во-вторых, вы должны заботиться об Id атрибуте

Поэтому, чтобы решить эту проблему, вы должны добавить другой текст с другим ID атрибутом, как показано ниже.

id Атрибут — это уникальный идентификатор, который используется для указания документа

 function copyElementText(id) {
    var text = document.getElementById(id).innerText;
    var elem = document.createElement("textarea");
    document.body.appendChild(elem);
    elem.value = text;
    elem.select();
    document.execCommand("copy");
    document.body.removeChild(elem);
    
    console.log(text);
} 
 <font id="text1" onclick="copyElementText(this.id)">Copy this text</font>
<font id="text2" onclick="copyElementText(this.id)">Copy another text</font>

Если <font> тегов много, то лучше использовать a class вместо id like ниже

 function copyElementText(event) {
    var text = event.innerText;
    
    var elem = document.createElement("textarea");
    document.body.appendChild(elem);
    elem.value = text;
    elem.select();
    document.execCommand("copy");
    document.body.removeChild(elem);
    
    console.log(text);
} 
 <font class="text" onclick="copyElementText(this)">Copy this text</font>
 <font class="text" onclick="copyElementText(this)">Copy another text</font>

Комментарии:

1. Спасибо за ваш ответ, я не знал, что изменение идентификатора было ответом на это. Я думал, что смогу использовать текст идентификатора только один раз, но, похоже, я ошибался.

2. @Cid Я думал, что смогу использовать текст идентификатора только один раз , мне кажется, что OP ошибочен с ID vs class . Поэтому я только что добавил к нему более подробное объяснение. пожалуйста, взгляните на sir.

3. @Phong с дополнительными объяснениями, это имеет больше смысла

4. Если <font> тегов много, то вместо id лучше использовать класс , а в логике javascript использовать forEach() метод или for .

5. @WJ496582 Это ответ на ваш вопрос? Дайте мне знать, если вам нужна помощь.

Ответ №2:

Вам нужно прикрепить прослушиватель событий к каждому элементу, как в примере ниже, если вы используете vanilla JS. Пожалуйста, взгляните

     var links = document.querySelectorAll('.link')

    links.forEach( function (cb) {
      cb.addEventListener("click", linkClicked)
    })

    function linkClicked(e) {
        e.preventDefault();
        var url = e.target.getAttribute('data-url')
        console.log(url);
        copyTextToClipboard(url);
    }

    function copyTextToClipboard(text) {
        var textArea = document.createElement("textarea");
        textArea.value = text;
        
        // Avoid scrolling to bottom
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";

        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Fallback: Copying text command was '   msg);
        } catch (err) {
            console.error('Fallback: Oops, unable to copy', err);
        }

        document.body.removeChild(textArea);
    }