使用jQuery复制到剪贴板？

Question

我想使用jquery将文本复制到剪贴板。但是我在某个地方失误了。我有以下代码：

<span class="copy-btn" data-type="attribute" data-attr-name="data-clipboard-text" data-model="couponCode" data-clipboard-text="<?php echo $result->coupon_code; ?>">COPY CODE</span>
                  </div>

而 jQuery 如下：

$(document).ready(function(){
    $('.copy-btn').on("click", function(){
        value = $(this).data('clipboard-text'); //Upto this I am getting value
        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val($(value).text()).select();
          document.execCommand("copy");
          $temp.remove();
    })
})

那么请你纠正我，我该如何将代码复制到剪贴板。我可以获得文本的值，但在此之后我无法进行下一步操作。

- Amit

---

你看过这个吗：https://dev59.com/SWEh5IYBdhLWcg3wTB1c#22581382？ - VVV

我已经尝试过获取它，但我想在jquery中使用它。 - Amit

你可以选择使用JavaScript解决方案，否则如果你想要使用jQuery，我认为你需要使用类似于“zeroclipboard”的东西。 - Muhammad Omer Aslam

Answer 1

在这一行上有一个错误：

$temp.val($(value).text()).select();

由于value已经是一个字符串，您不需要尝试将其作为输入字段获取。只需使用以下内容即可：

$temp.val(value).select();

这是一个可运行的示例。

- VVV

Answer 2

var copyToClipboard = function (text) {
            var $txt = $('<textarea />');    
            $txt.val(text).css({ width: "1px", height: "1px" }).appendTo('body');
            $txt.select();    
            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

- Alper Ebicoglu

Answer 3

html:

<button address="any text" class="btn btn-login copyToClipboard"><span> copy</span>

JS文件：

$('.copyToClipboard').click(function () {
        let str = $(this).attr('address');
        const el = document.createElement('textarea');
        el.value = str;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    })

- Hamed baftam