原生js实现复制文本到粘贴板

原创
所属分类: Web前端 2021-01-15 1172
来源:baidu.com

原生JavaScript实现文本复制到剪切板,点击按钮后,直接粘贴即可~

HTML部分:

<button class="btn btn-info btn-minier copy-btn" data-text="卖家test">复制卖家名称</button>

js部分:

// 调用copyText方法使用了Jquery语法
$(".copy-btn").click(function() {
     var text = $(this).attr('data-text');

     copyText(text);
});

// 复制内容到剪切板
function copyText(text) {

    var textareaEl = document.createElement('textarea');

    textareaEl.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘    
    
    textareaEl.value = text;

    document.body.appendChild(textareaEl);

    textareaEl.select();

    var res = document.execCommand('copy');

    document.body.removeChild(textareaEl);

    console.log("已经复制到剪贴板:\n" + text);

    return res;

}


参考文章:

原生js实现复制文本到粘贴板 - web得胜 - 博客园


原创声明:本文为博主原创文章,转载请附上原文出处链接和声明。

相关推荐

更多内容>

前端css/js实现文字上下滚动

Web前端

前端如何展示商品属性:SKU多维属性状态判断算法的应用

Web前端

bootstrap-switch 使用中遇到的问题

Web前端

如何在CSS中添加手机端(移动端)自适应样式

Web前端
点这里分享到
朋友圈