使用jquery复制到剪贴板?

时间:2017-11-09 16:47:32

标签: jquery

我想使用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();
    })
})

所以请纠正我,如何将代码复制到剪贴板。我得到了文本的价值,但之后我无法继续。

4 个答案:

答案 0 :(得分:7)

这一行有错误:

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

由于value已经是字符串,因此您无需尝试将其作为输入字段。只需使用:

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

Here's a working example.

答案 1 :(得分:2)

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);
    })

答案 2 :(得分:1)

对于正在寻找将文本复制到剪贴板的简单功能的人

function copyToClipboard(text) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
}

可以用jQuery这样调用:

$('#copyButtonId').click(function () { copyToClipboard("this text was copied"); });

答案 3 :(得分:0)

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();
            }
        };