美文网首页
超简单的jquery 点击文本复制文本

超简单的jquery 点击文本复制文本

作者: 追风筝的一朵云 | 来源:发表于2021-03-31 11:16 被阅读0次

    有点仿蓝湖的点击代码就复制的功能,直接点击你想复制的文本,就可以复制成功了

    html:

    <ul class="info-list">

      <li>

        <div class="info">

        <em>1</em>

        <span class="link-addr"title="123333333">123333333</span>

        </div>

      </li>

      <span class="copy-success">复制成功</span>

    </ul>

    css:
    .copy-success{

        display: none;

        padding: 6px 12px;

        text-align: center;

        background-color: #fff;

        color: #333;

        border-radius: 4px;

        position: fixed;

        top: 10px;

        left: 50%;

        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);

    }

    js:

    <script>

      $('.link-addr').click(function () {

            $('#codeText').val($(this).text())

            console.log($('#codeText').val(),8)

            $('#codeText').select()

            console.log($('#codeText').select(),9)

            document.execCommand("Copy");

            //复制成功后提示文字

            var y = $(this).offset().top - 32,

                x = $(this).offset().left + 45

            $('.copy-success').css({

                'display': 'block',

                'top': y,

                'left': x

            });

            setTimeout("$('.copy-success').css('display', 'none')", 1500);

        })

    </script>

    这是第一种,这种有一点不是很好,就是页面上不需要出现输入框,如果直接用css隐藏的话复制就不起作用了,所以有了第二种方法

    如下:

    <script>

            $(".link-addr").click(function () {

                var copy_text = $(this).text();//需要复制的内容

                var y = $(this).offset().top - 32,

                    x = $(this).offset().left + 45;

                copyText(copy_text);

                //复制成功后提示文字

                $('.copy-success').css({

                    'display': 'block',

                    'top': y,

                    'left': x

                });

                setTimeout("$('.copy-success').css('display', 'none')", 1500);

            });

            function copyText(text) {

                var oInput = document.createElement('input');

                oInput.value = text;

                document.body.appendChild(oInput);

                oInput.select();

                document.execCommand("Copy");

                oInput.className = 'oInput';

                oInput.style.display = 'none';

            }

        </script>

    相关文章

      网友评论

          本文标题:超简单的jquery 点击文本复制文本

          本文链接:https://www.haomeiwen.com/subject/geuohltx.html