jQuery实现点击复制文本效果

思路：

不能直接复制P标签，先将P标签的值赋值给textarea标签，然后再进行复制。

利用 opacity:0 将内容透明度设置为0，不显示。

别忘记引用JQ文件！

HTML代码

<style type="text/css">.wrapper {position: relative;}#inputs {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style><div class="wrapper"><p id="texts">恭喜你复制成功了！</p><textarea id="inputs">空盒子(可留空)</textarea><p onclick="copyText()">点我复制</p>
</div>

JS代码

<script type="text/javascript">function copyText() {var texts = document.getElementById("texts").innerText;var inputs = document.getElementById("inputs");inputs.value = texts; // 修改文本框的内容（赋值内容）inputs.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令alert("复制成功");//测试执行是否成功}</script>

纯属记录，别无他意。

jQuery实现点击复制文本效果相关推荐

jquery实现点击复制文本
<body><input> <h1 id="aaa">Hello World</h1> <input type="b ...
js点击复制文本 - 案例篇
文章目录 js点击复制文本 :代码+效果图效果图 · 示下: html 代码如下: 注意代码: 附:[javascript监听键盘事件 - 如表单enter回车提交](https://blog.cs ...
【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
微信小程序点击复制文本到剪切板，获取剪切板内容
设置剪切板:wx.setClipboardData 获取剪切板:wx.getClipboardData api:https://developers.weixin.qq.com/miniprogram ...
H5移动端完美实现点击复制文本的解决方法，已经自测！
简介当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容.这个方法的命令 ...
js方法点击复制文本
copy(data) { //复制文本let url = data;let oInput = document.createElement('input');oInput.value = url;do ...
前端点击复制文本无需插件
// 复制文本copyText(text) {navigator &&navigator.clipboard &&navigator.clipboard.writeTe ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...
html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 ...
JQuery实现点击TreeView文本展开/折叠子节点
注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应 ...

jQuery实现点击复制文本效果

jQuery实现点击复制文本效果

jQuery实现点击复制文本效果相关推荐

最新文章

热门文章