美文网首页
超简单的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