手机端点击按钮复制到粘贴板教程


做项目中,遇到点击按钮复制到粘贴板,网上搜了很多,如:用flash实现的复制功能,jquery.zclip.js

但是不支持手机端,找了好久才找到这个神器!clipboard.js

代码如下:

<!DOCTYPE html>    
<html>    
<head>    
    <meta charset="UTF-8">    
    <script src="http://tpl.study126.com/common/js/jquery/jquery.v1.9.0.js"></script>   
    <script src="http://tpl.study126.com/common/js/clipboard.min.js"></script>    
    <title>移动端复制到剪贴板!</title>    
</head>    
<body>    
<p>哈哈<span id="target">复制到粘贴板</span></p>    
<button data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    复制按钮    
</button>    
    
</body>    
<script>    
    $(document).ready(function(){    
        var targetText=$("#target").text();    
        var clipboard = new Clipboard('#copy_btn');    
    
        clipboard.on('success', function(e) {    
            console.info('Action:', e.action);    
            console.info('Text:', e.text);    
            console.info('Trigger:', e.trigger);    
            alert("复制成功");    
    
            e.clearSelection();    
        });    
    });    
</script>    
</html>


返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册