有点仿蓝湖的点击代码就复制的功能,直接点击你想复制的文本,就可以复制成功了
html:
<ul class="info-list">
<li>
<div class="info">
<em>1</em>
<span class="link-addr"title="123333333">123333333</span>
</div>
</li>
<span class="copy-success">复制成功</span>
</ul>
css:
.copy-success{
display: none;
padding: 6px 12px;
text-align: center;
background-color: #fff;
color: #333;
border-radius: 4px;
position: fixed;
top: 10px;
left: 50%;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}
js:
<script>
$('.link-addr').click(function () {
$('#codeText').val($(this).text())
console.log($('#codeText').val(),8)
$('#codeText').select()
console.log($('#codeText').select(),9)
document.execCommand("Copy");
//复制成功后提示文字
var y = $(this).offset().top - 32,
x = $(this).offset().left + 45
$('.copy-success').css({
'display': 'block',
'top': y,
'left': x
});
setTimeout("$('.copy-success').css('display', 'none')", 1500);
})
</script>
这是第一种,这种有一点不是很好,就是页面上不需要出现输入框,如果直接用css隐藏的话复制就不起作用了,所以有了第二种方法
如下:
<script>
$(".link-addr").click(function () {
var copy_text = $(this).text();//需要复制的内容
var y = $(this).offset().top - 32,
x = $(this).offset().left + 45;
copyText(copy_text);
//复制成功后提示文字
$('.copy-success').css({
'display': 'block',
'top': y,
'left': x
});
setTimeout("$('.copy-success').css('display', 'none')", 1500);
});
function copyText(text) {
var oInput = document.createElement('input');
oInput.value = text;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
oInput.className = 'oInput';
oInput.style.display = 'none';
}
</script>
网友评论