您的位置：首页 > Web前端 > BootStrap

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

2020-08-26 17:56 1541 查看

一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航