前端点击按钮复制内容

一、VUE

效果:

代码:

 1 <template>
 2     <div>
 3         <el-row style="height:40px" type="flex">
 4             <el-col :span="6">
 5                 <p>{{res}}</p></el-col>
 6             <el-col :span="2">
 7                 <el-button type="button" @click="copy()">复制</el-button>
 8             </el-col>
 9
10         </el-row>
11     </div>
12 </template>
13 <script>
14     export default {
15         data() {
16             return {
17                 res: ‘要复制的内容‘,
18             }
19         },
20
21         methods: {
22             copy() {
23                 this.$copyText(this.res).then(function (e) {
24                     alert(‘已复制‘)
25
26                 }, function (e) {
27                     alert(‘复制失败‘)
28                 })
29             },
30
31
32         }
33     }
34 </script>

二、html

效果:

代码:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 </head>
 5 <body>
 6 <div>
 7     <span id="copy">复制的内容</span>
 8     <button type="button" onclick="copy()">复制</button>
 9
10 </div>
11 </body>
12 <script type="text/javascript" src="static/js/jquery.min.js"></script>
13 <script type="text/javascript" src="static/js/main.min.js"></script>
14 <script type="text/javascript">
15     function copy() {
16     var copyTest = document.getElementById("copy").innerText;
17     var inputTest = document.createElement(‘input‘);
18     inputTest.value = copyTest;
19     document.body.appendChild(inputTest);
20     inputTest.select();
21     document.execCommand("Copy");
22     inputTest.className = ‘oInput‘;
23     inputTest.style.display = ‘none‘;
24     alert(‘复制成功‘);
25 }
26 </script>
27
28 </html>

原文地址:https://www.cnblogs.com/whycai/p/12080564.html

时间: 2024-10-07 16:48:32

前端点击按钮复制内容的相关文章

移动端点击按钮复制文本内容

<div><p>邀请码</p>//<p id="inviteCode" class="inviteCode">{{invite_code}}</p><input id="inviteCode" class="inviteCode" type="text" /><p class="copy">复制</

移动端点击按钮复制文本

话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.jsdelivr.net/c

JS实现PC、Android、IOS端的点击按钮复制内容功能

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-div</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </hea

JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span> js代码 <script type="text/javascript"> function copyArticle(even

JS实现点击按钮复制指定代码大全

<br><br>一.点击复制文本框内容的代码:<br><br> <script type="text/javascript"> function jsCopy(){ var e=document.getElementById("content");//对象是content e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制

ASP.NET MVC 防止前端点击劫持

前端点击劫持的原理:通过向我们的页面中添加Iframe,并将Iframe设置成透明,在页面相应的地方设置一些操作引导,让用户在不知不觉中发送一些请求. 解决前端点击劫持的手段就是在服务器端的响应报文中增加X-Frame-Options配置.X-Frame-Options值有3种: 1.DENY:无论如何不在框架中显示. 2.SAMEORIGIN: 仅在同源域名下的框架中显示. 3.ALLOW-FROM uri:仅在指定域名下的框架中显示. 配置X-Frame-Options的手段也有多种: 1.

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会. 这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料. Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf . 具体实现如下: jsp页面:  <p>                               

点击按钮复制文本

点击按钮,进行文本复制操作.实现这个功能需要二点: 一:用window.getSelection().selectAllChildren("")获取要复制的内容 二:用document.execCommand ("Copy");进行复制操作 关键代码 window.getSelection().selectAllChildren(val); document.execCommand ("Copy"); HTML <p id="co

手机端点击按钮阴影 ios输入框阴影解决方法

ios输入框阴影 input{ -webkit-appearance: none;} 点击按钮 阴影 a,button,input { -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color:transparent; outline: 0;}