zoukankan      html  css  js  c++  java
  • js实现一键复制

    方法一:

    使用插件 引入clipboard.js

    使用如下

    <script>
        copyFn = function() {
                var clipboard = new Clipboard('.copy-btn', {
                    text: function(trigger) {
                        return $('.copy-txt').text();
                    }
                });
                clipboard.on('success', function() {
                    alert('复制成功!');
                });
                clipboard.on('error', function(e) {
                    alert('请手动选择文本复制!');
                });
            }
         copyFn();
    </script>

     方法二:

    <input type="text" readonly="readonly" unselectable="on" value="mytxt" class='mytxt' style=" background: none;border: none;color: #dfc37a; ">
    <a class="copyname" href="javascript:;">复制</a>
    
    <script type="text/javascript">
        $('.copyname').click(function(){
            var dd = $('.mytxt');
            dd[0].select();
            document.execCommand("Copy");
        });
    </script>

    方法三:

    原文:https://blog.csdn.net/github_36091081/article/details/77508710

    <script type="text/javascript">
    function copyUrl2()
        {
            var Url2=document.getElementById("biao1").innerText;
            var oInput = document.createElement('input');
            oInput.value = Url2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            alert('复制成功');
        }
    </script>
    <div cols="20" id="biao1">12345678</div>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
  • 相关阅读:
    HTML DOM Document 对象
    浏览器对象模型 BOM
    JavaScript数组和字符串基础
    JavaScript基础一
    css属性hack
    浏览器兼容性问题
    css常见居中方法
    初析BFC
    学习Css的初级篇
    THML基础学习
  • 原文地址:https://www.cnblogs.com/qiufang/p/8987084.html
Copyright © 2011-2022 走看看