jquery 复制到粘贴板（在wordpress中使用了bootstrap 的 modal 弹窗，在弹窗上复制）

最新推荐文章于 2021-03-31 23:18:43 发布

﹏゛Aeljinh陌琳

最新推荐文章于 2021-03-31 23:18:43 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/qq_37541486/article/details/108244615

版权

遇到的小问题：
想要复制粘贴一段会有好几个这行的内容，比如：

<p id="copyContent">Zhang, Q., Stree15-<br/>13299-<br/>2015, 2015.</p>

想要复制出来的内容

Zhang, Q., Stree15-
13299-
2015, 2015.

就需要修改js注意：想要复制粘贴出可折行的内容，必须使用textarea

var textarea = document.createElement("textarea");//创建input对象
        var currentFocus = document.activeElement;//当前获得焦点的元素
        document.body.appendChild(textarea);//添加元素
        var textareaValue = text.replace(/<br>/g, "\n");
        textarea.value = textareaValue;
        textarea.focus();
        if(textarea.setSelectionRange)
            textarea.setSelectionRange(0, textareaValue.length);//获取光标起始位置到结束位置
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");//执行复制
        } catch(eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);//删除元素
        currentFocus.focus();
        return flag;

如下是正常情况下复制粘贴

一个index.html文件

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
    </head>

    <body>
        <p id="copyContent">Zhang, Q., Stree15-13299-2015, 2015.</p>
        <button type="button" action="copy" class="btn btn-default" data-i18n-text="copyClipboard">点击复制代码</button>
    </body>
</html>
<script src="./svgLayer/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $('button[action="copy"]').on('click',function(){
        var val = $('#copyContent').text();
        var flag = copyText(val); //传递文本
        alert(flag ? "复制成功！" : "复制失败！");
    })

    function copyText(text) {
        var textarea = document.createElement("input");//创建input对象
        var currentFocus = document.activeElement;//当前获得焦点的元素
        document.body.appendChild(textarea);//添加元素
        textarea.value = text;
        textarea.focus();
        if(textarea.setSelectionRange)
            textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");//执行复制
        } catch(eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);//删除元素
        currentFocus.focus();
        return flag;
    }
</script>

在我的项目中list.php（wordpress-bootstrap-modal）

在 modal最外层的div中 class=“modal fade bs-example-modal-lg” role=“dialog” tabindex="-1" id=“ReadmeModalLabel” 由于有 tabindex="-1"，导致虽然提示复制成功，但是粘贴板并没有刚刚复制的内容，去掉 tabindex = -1 即可


<?php
  
  /*
 Template Name:xxx
  ?>
<?php
/*
 */

get_header();
?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/public/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/wpMeicList.css">
<main id="meic_list" role="main">
    <div class="page-meicList container" style="padding-left:0;padding-right:0;">
        <div class="col-sm-3"></div>
        <div class="col-sm-9"></div>
    </div>
    <div class="modal fade bs-example-modal-lg" role="dialog" tabindex="-1" id="ReadmeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" data-i18n-text="Readme"></h4>
                </div>
                <div class="modal-body">
                    <p data-i18n-text="pleaseReferTo" class="pleaseReferTo"></p>
                    <div class="copyWraper">
                        <p id="copyContent">
                        Zhang, Q., Stree
                        </p>
                        <button type="button" action="copy" class="btn btn-default" data-i18n-text="copyClipboard"><i class="glyphicon glyphicon-duplicate" style="margin-right:3px"></i></button>
                        <p class='glyphicon_copy_succe'><i class="glyphicon glyphicon-ok-sign"></i> <span data-i18n-text="CopiedClipboard"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="<?php echo get_template_directory_uri(); ?>/public/jquery.cookie.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/public/i18n/jquery.i18n.properties.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/public/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/public/bootstrap/js/bootstrap-table.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/public.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/public/mapview/color.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/public/mapview/util.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/mapview.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/meic_list.js"></script>

﹏゛Aeljinh陌琳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 复制到粘贴板（在wordpress中使用了bootstrap 的 modal 弹窗，在弹窗上复制）

一个index.html文件<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <bo
复制链接

扫一扫