首页 > 其他 > 详细

demo:复制粘贴功能

时间:2019-01-08 11:52:17      阅读:157      评论:0      收藏:0      [点我收藏+]

复制链接功能,也是为了方便用户一键“复制”,粘贴链接和文本到指定位置,在此,接着上一篇“demo:生成专属二维码link ”来记录一键“复制”的实现。

相关插件

<!--布局:  按钮  输入框-->
<a href="###" class="copylinkbtn" data-clipboard-target="#myLink">复制链接</a>
<input type="text" class = "copylink" id="myLink" value=""/><!--输入框必须要,页面没展示,就使用障眼法,定位定出去-->
<!--复制成功-->
<div class="prompt_box">
  <span>复制链接成功!</span>
</div>
<!--引用相关js:-->
<script src="jquery.min.js"></script>
<script src="clipboard.min.js"></script>

js的使用

$(document).ready(function(){
    var myCodeUrl = "https://home.cnblogs.com/u/missme-lina"
    $(‘.copylink‘).val(myCodeUrl);
    console.log($(‘.copylink‘).val());
    copy();
    //复制功能
    function copy(){
        var clipboard = new Clipboard(‘.copylinkbtn‘);
        //提示复制成功
        clipboard.on(‘success‘, function(e) {
            $(‘.prompt_box‘).show();
            setTimeout(function(){$(".prompt_box").hide();},2000);//2秒后执行该方法
            e.clearSelection();
        });
        clipboard.on(‘error‘, function(e) {
            alert(‘sorry,该浏览器暂不支持复制功能,请升级或选择其他浏览器后重试!‘)
        });
    }
});

实现效果

技术分享图片

jquery.qrcode.js的API

请自己转载官方文档:https://clipboardjs.com/

demo:复制粘贴功能

原文:https://www.cnblogs.com/missme-lina/p/10221230.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!