首页> 实战笔录 >前端开发 >JQuery JQuery

Jquery实现点击按钮复制数据到剪切板

作者:小萝卜 2020-05-21 浏览 1208

简介绝对有效,Jquery实现点击按钮复制数据到剪切板

源码如下:
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>jQuery/Js复制文本到剪贴板</title>
  <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> 
  <script  src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
</head>
<body>

<input type="text" name="name" id="target" class="required input-xlarge" value="www.baidu.com" readonly ="" >
 <input type="button" name="" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn"value="复制地址" style="margin-bottom: 10px;">

<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("复制成功");
           alert('复制成功');
           e.clearSelection(); 
       });
 });
</script>

</body>
</html>
 

很赞哦! (0)

文章评论

    高端网站建设