有點仿藍湖的點擊代碼就復(fù)制的功能沸柔，直接點擊你想復(fù)制的文本毫缆，就可以復(fù)制成功了
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">復(fù)制成功</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");
? ? ? ? //復(fù)制成功后提示文字
? ? ? ? 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>
這是第一種痒留，這種有一點不是很好佩憾，就是頁面上不需要出現(xiàn)輸入框挚币，如果直接用css隱藏的話復(fù)制就不起作用了艾凯，所以有了第二種方法
如下：
<script>
? ? ? ? $(".link-addr").click(function () {
? ? ? ? ? ? var copy_text = $(this).text();//需要復(fù)制的內(nèi)容
? ? ? ? ? ? var y = $(this).offset().top - 32,
? ? ? ? ? ? ? ? x = $(this).offset().left + 45;
? ? ? ? ? ? copyText(copy_text);
? ? ? ? ? ? //復(fù)制成功后提示文字
? ? ? ? ? ? $('.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>
