Javascript-форум - Как скопировать текст ссылки при нажатии ?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как скопировать текст ссылки при нажатии ? (https://javascript.ru/forum/events/83824-kak-skopirovat-tekst-ssylki-pri-nazhatii.html)

Как скопировать текст ссылки при нажатии ?

Доброго времени суток, друзья. Вот таким образом пытаюсь при нажатии на ссылку поместить текст ссылки в буфер обмена, но ничего не выходит:

<html>
    <head>
        <title>Test Page</title>    
    </head>
    <body>
        <main>
<a id='copy' href='/category.php'>Этот текст нужно скопировать в буфер обмена</a>

<script>
    const copy = document.querySelector('#copy');
    copy.addEventListener('click',
      function(event) {
        const text = document.querySelector('#copy');
        text.select();
        document.execCommand('copy');
      });    
</script>

        </main>
    </body>
</html>

Подскажите пожалуйста, как правильно скопировать текст ссылки в буфер обмена и вывести сообщение о том, что она скопирована. Не важно на чистом JS или jQuery. Любой вариант подойдет. Спасибо.

Sice,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <main>
        <a id='copy' href='/category.php'>Этот текст нужно скопировать в буфер обмена</a>
        <script>
            const copy = document.querySelector('#copy');
            copy.addEventListener('click',
                function(event) {
                    event.preventDefault();
                    const text = document.querySelector('#copy');
                    navigator.clipboard.writeText(text.textContent);
                });
        </script>
    </main>
</body>

</html>

Спасибо огромное! Прочитал уже, что execCommand('copy');
устарел. А подскажите, как всплывающее сообщение сделать, что оно исчезло через 1-2 секунды?

navigator.clipboard копирование в буфер обмена

Sice,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .attention {
            display: none;
        }

        .attention.open {
            display: block;
        }
    </style>
</head>

<body>
    <main>
        <a id='copy' href='/category.php'>Этот текст нужно скопировать в буфер обмена</a>
        <div class="attention">Скопировано</div>
        <script>
            const text = document.querySelector('#copy'),
                div = document.querySelector('.attention');
            text.addEventListener('click',
                function(event) {
                    event.preventDefault();
                    navigator.clipboard.writeText(text.text);
                    window.clearTimeout(text.timer);
                    div.classList.add('open');
                    text.timer = window.setTimeout(_ => div.classList.remove('open'), 1500)
                });
        </script>
    </main>
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 544366)

Sice,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .attention {
            display: none;
        }

        .attention.open {
            display: block;
        }
    </style>
</head>

<body>
    <main>
        <a id='copy' href='/category.php'>Этот текст нужно скопировать в буфер обмена</a>
        <div class="attention">Скопировано</div>
        <script>
            const text = document.querySelector('#copy'),
                div = document.querySelector('.attention');
            text.addEventListener('click',
                function(event) {
                    event.preventDefault();
                    navigator.clipboard.writeText(text.text);
                    window.clearTimeout(text.timer);
                    div.classList.add('open');
                    text.timer = window.setTimeout(_ => div.classList.remove('open'), 1500)
                });
        </script>
    </main>
</body>

</html>

Спасибо за помощь! Столкнулся с проблемой, что в PHP, в цикле если их выводить не работает. Насколько я помню ID должен быть для каждой ссылки уникальный ?

Тогда как мне быть ? чтобы все они копировались по нажатию ?

Делаю так:

<?php
$coins[0]['name'] = "Adena";
$coins[1]['name'] = "Oren";
$coins[2]['name'] = "Giran";

echo "<br>";

for($i=0; $i < 3; $i++) {
   echo "<a id='copyticker' href='#'>".$coins[$i]['name']."</a>" . "<br>"; 
}

?>

<script>
    const copy = document.querySelector('#copyticker');
    copy.addEventListener('click',
        function(event) {
            event.preventDefault();
            const text = document.querySelector('#copyticker');
            navigator.clipboard.writeText(text.textContent);
        });  
</script>

Цитата:

Сообщение от Sice

echo "<a id='copyticker'

id замените на class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     .copyticker.copy:after{
      content: ' Скопировано';
        }
    </style>
</head>
<body><br><a class="copyticker" href="#">Adena</a><br><a class="copyticker" href="#">Oren</a><br><a class="copyticker" href="#">Giran</a><br>
    <script>
        document.addEventListener('click',
            function(event) {
                let target = event.target.closest('.copyticker');
                if (target) {
                    event.preventDefault();
                    navigator.clipboard.writeText(target.textContent);
                    window.clearTimeout(target.timer);
                    target.classList.add('copy');
                    target.timer = window.setTimeout(_ => target.classList.remove('copy'), 1500)
                }
            });
    </script>
</body>
</html>