至2023年最好用的兼容多浏览器的原生js复制函数copyText

更新时间：2023年05月02日 16:39:18 作者：前端白雪

因为后台需要增加一些复制一些内容非表单中内容，那么下面这个函数就非常的好用了，其实也是利用了表单的数据权限比较容易突破，下面是具体的实现函数，大家可以拿走

JS复制文本到剪切板 copyText

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <span class="orange" id="shareUrl" data-url="www.baidu.com">www.baidu.com</span>
        <script>
            // 复制
            function copyText(text) {
                var textArea = document.createElement("textarea");
                // textArea.style['display']='none'
                textArea.style['position'] = 'absolute'
                textArea.style['top'] = '0'
                textArea.style['left'] = '0'
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    var successful = document.execCommand('copy');
                    var msg = successful ? 'successful' : 'unsuccessful';
                    console.log(msg)
                } catch (err) {
                    console.error('复制失败', err);
                }
                document.body.removeChild(textArea);
                if (successful) {
                    return true
                }
            };
            $(function() {
                var shareUrl = $("#shareUrl").data("url");
                $("#shareUrl").click(function() {
                    var shareUrl = $("#shareUrl").data("url");
                    if (copyText(shareUrl)) {
                        alert("复制成功");
                    }
                })
            })
        </script>
    </body>
</html>

脚本之家小编删减后的代码，减少了判断，其实上面的代码是非常好的

function copyText (text) {
        //生成一个textarea对象
      var textArea = document.createElement('textarea');
        //设置属性
      textArea.style.position = 'fixed';
      textArea.style.top = 0;
      textArea.style.left = 0;
      textArea.style.width = '2em';
      textArea.style.height = '2em';
      textArea.style.padding = 0;
      textArea.style.border = 'none';
      textArea.style.outline = 'none';
      textArea.style.boxShadow = 'none';
      textArea.style.background = 'transparent';
      textArea.value = text;
      //添加到页面body
      document.body.appendChild(textArea);
      textArea.select();
      //执行
        var msg = document.execCommand('copy') ? '成功' : '失败';
        Popup('复制内容' + msg);
       //移除对象
      document.body.removeChild(textArea);
    } 
function Popup(message){
            var span=document.createElement('span')
            span.innerHTML=message || 'default'
            span.className='popupStyle'
            span.style.display='block'
            document.body.appendChild(span)
            setTimeout(()=>{
                span.remove()
            },1000)
        }

对了不要忘了css样式

.popupStyle{
            width:180px;
            height:50px;
            background-color: rgb(85,85,85);            
            /* display:none; */
            color:#fff;
            text-align:center;
            line-height:50px;
            border-radius:5px;
            padding:0;
            position:fixed;
            z-index:1;
            top:30%;
            left:50%;
            transform:translateX(-50%);
        }

对于之前的一些代码，可以当个学习参考，原生js实现。

您可能感兴趣的文章:

Cordova(ionic)项目实现双击返回键退出应用
这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
微信小程序实现弹球游戏
这篇文章主要为大家详细介绍了微信小程序实现弹球游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
JS 强制设为首页的代码
把网站设置为浏览器的首页是我们做网站时经常加到网站顶部的功能！下面这段代码是强制设置为首页的代码！最好别用啊！呵呵！
2009-01-01
JavaScript算法题之如何将一个数组旋转k步
这篇文章主要给大家介绍了关于JavaScript算法题之如何将一个数组旋转k步的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
脚本合并提升javascript性能示例
脚本合并可以有效提升javascript性能，下面有个不错的示例，大家可以参考下
2014-02-02
Promise+async+Generator的实现原理
这篇文章主要介绍了Promise+async+Generator的实现原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
微信小程序与webview交互实现支付功能
这篇文章主要介绍了微信小程序与webview交互实现支付功能，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
高效的jquery数字滚动特效
这篇文章主要介绍了高效的jquery数字滚动特效，灵活的进行数字滚动，感兴趣的小伙伴们可以参考一下
2015-12-12
移动端界面的适配
本文主要介绍了移动端页面适配相关知识，用于解决在所有手机上看到字体的大小都一样问题。下面跟着小编一起来看下吧
2017-01-01
JavaScript实现登录滑块验证
这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04