超简单的jquery 点击文本复制文本

有点仿蓝湖的点击代码就复制的功能，直接点击你想复制的文本，就可以复制成功了

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>

超简单的jquery 点击文本复制文本相关推荐

jquery 点击按钮复制文本内容（亲测有效）
function copyText(text) {var oInput = document.createElement('input');oInput.value = text;document.b ...
点击按钮复制文本框内容
点击按钮复制文本框内容复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 ...
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理 ...
JS复制文本到粘贴板，前端H5移动端点击按钮复制文本到粘贴板。
最近做手机端H5网页里面有个活动:点击按钮复制邀请码.查过一些方法,在电脑端可以复制粘贴,一放在手机上面打开网页就不能复制粘贴了. 直接进入正题使用开源项目 clipboard.js, 官网:点击打 ...
js实现点击一键复制文本
一.功能描述点击按钮,实现一键复制div元素中的文本内容,并且可以实现粘贴. 为了体现出粘贴功能,添加一个input框,精赋值的内容粘贴到input框里二.代码实现 html部分 <div ...
html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 ...
实现点击按钮复制文本（Clipboard包）
操作如下: npm install clipboard --save import Clipboard from 'clipboard'; Vue.use(VueClipboard) <temp ...
实现点击按钮复制文本内容
一.原生方法 1.结构 <li><span>运单号码:</span><b id="waybill_number">{$order-& ...

超简单的jquery 点击文本复制文本

超简单的jquery 点击文本复制文本相关推荐

最新文章

热门文章