jquery实现点击复制文本功能
2021-01-19 本文已影响0人
吕保鑫
copy.jpg
<div class="code copyDiv">
<pre style="height:135px;"><code id="codeText"></code></pre>
<span class="forXsCancelBtn copyBtn">复制</span>
<p id="copySuccess" style="display: none;"><span>复制成功</span></p>
</div>
.copyDiv {
background: #f2f5f9;
border-radius: 4px;
resize: none;
padding: 16px;
color: #81868f;
position: relative;
}
#copySuccess {
position: absolute;
left: 50%;
bottom: 45px;
transform: translate(-50%,0);
}
#copySuccess span {
border: 1px solid transparent;
padding: 10px;
background: #dadbde;
color: #fff;
}
<script>
//网页插件点击copy功能
$('.copyBtn').click(function () {
selectText("codeText");//选择要复制的id
document.execCommand("copy");//执行复制操作
//插件代码复制成功后提示文字
$('#copySuccess').css('display', 'block');
setTimeout("$('#copySuccess').css('display', 'none')", 1500); //自动隐藏提示文字
})
function setCode() {
var code = '';
code += 'http://www.baidu.com';
$('#codeText').text(code);
}
setCode();
//选择要被复制的文字范围
function selectText(element) {
var text = document.getElementById(element);
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
</script>