移动端复制到粘贴板

最新推荐文章于 2021-12-29 14:42:06 发布

墨韵成香

最新推荐文章于 2021-12-29 14:42:06 发布

阅读量381

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pangwl/p/9044880.html

版权

移动端复制到粘贴板

前端时间做移动端碰到了关于复制到粘贴板的问题，搜到了下面两种方法，第一种亲测在手机上是有用的，第二种等待你萌在移动端测试是否成功告诉我哈！

法一

HTML：

<input type="text" id="text_input" /> <button type="button" id="copy_text">copy</button>

js:

`var inputElem = document.getElementById('text_input');
var btnElem = document.getElementById('copy_text');
btnElem.addEventListener('click', function() {
if(!document.execCommand) {
    console.error('copy unsupport');
    return;
 }
 inputElem.select();
 var result = document.execCommand('copy');
if(result) {
 console.log('copy success');
} else {
    console.error('copy fail');
}
});`

注意事项

检测当前环境是否支持命令API，这一步不可或缺。
浏览器环境不支持命令API，需要合理地提示用户手动进行复制操作。所以，一定不能设置文本元素 user-select: none;，这样会使文本不能被选择。
表单元素必须处于被选中状态，即调用 inputElement.select() 方法，文本元素没有 select() 方法。
经测试，不能使用 display: none; 或 visibility: hidden; 来隐藏表单元素。所以，只能将此表单元素，定位至可以见区域之外。
必须表单元素有用，如果不是表单元素，建议新建input标签，然后把val赋给input，在进行操作。需要灵活实现

引用：https://www.cnblogs.com/xianxianxxx/p/8056396.html

法二

    `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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>`

法二在pc端进行了测试可行。
引用：https://www.cnblogs.com/chefweb/p/7765730.html

转载于:https://www.cnblogs.com/pangwl/p/9044880.html

墨韵成香

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端复制到粘贴板

移动端复制到粘贴板前端时间做移动端碰到了关于复制到粘贴板的问题，搜到了下面两种方法，第一种亲测在手机上是有用的，第二种等待你萌在移动端测试是否成功告诉我哈！法一HTML：<input type="text" id="text_input" /> <button type="button" id="copy_text">copy</button...
复制链接

扫一扫