移动端点击按钮复制文本

Posted zshno1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端点击按钮复制文本相关的知识，希望对你有一定的参考价值。

话不多说直接上代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
    <title>移动端复制到剪贴板！</title>  
</head>  
<body>  
<p>哈哈<span id="target">你没看错，就是复制的这里</span></p>  
<button class="btn" 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>

 

以上是关于移动端点击按钮复制文本的主要内容，如果未能解决你的问题，请参考以下文章

移动端输入框只有输入文本后才能点击效果

vue项目中做点击按钮复制文本框内容

解决clipboad.js在移动端复制失败的问题

移动端 点击 复制到剪贴版

求助在移动端如何实现点击复制粘贴功能

移动端H5页面按钮btn点击效果