如何在復制緩沖區中放置帶有鏈接文本的鏈接？

Question

這段文字是一個鏈接。 我如何將其放入復制緩沖區（例如通過navigator.clipboard.writeText() ），以便當用戶將其粘貼到其他地方時，它會保留鏈接文本以及鏈接本身？

提前致謝！

Answer 1

當您使用 addEventListener 時，您可以從事件中提取所有信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test page</title>
</head>
<body>
    <a class="link" href="https://stackoverflow.com/">Stackoverflow</a>

    <script>
        const linkComponent = document.querySelector('.link');

        linkComponent.addEventListener('click', (event) => {
            event.preventDefault(); // This will prevent the default action (going to link)
            navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
        });
    </script>
</body>
</html>

Answer 2

我使用 ClipboardJs，它適用於 gmail 或其他 email 客戶端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
    <a href="https://google.com">test link</a>
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
    let clipboard = new ClipboardJS(".btn", {})
        .on("success", function () {
            console.log('success')
        })
        .on("error", function () {
            console.log('error')
        });
</script>
</body>
</html>

如何在復制緩沖區中放置帶有鏈接文本的鏈接？

問題描述

2 個解決方案

解決方案1
0 2021-08-20 09:22:47

解決方案2
0 2021-08-20 09:53:53

如何在復制緩沖區中放置帶有鏈接文本的鏈接？

問題描述

2 個解決方案

解決方案1 0 2021-08-20 09:22:47

解決方案2 0 2021-08-20 09:53:53

解決方案1
0 2021-08-20 09:22:47

解決方案2
0 2021-08-20 09:53:53