js点击复制文本：代码+效果图

效果图 · 示下：

html 代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>邀请好友</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="static.docs/plugins/mui/css/mui.min.css"/><link rel="stylesheet" type="text/css" href="static.docs/css/header.css"/><link rel="stylesheet" type="text/css" href="static.docs/css/promotersInfo.css"/><style type="text/css"></style>
</head>
<body>        <!--头部导航区域--><header class="mui-bar mui-bar-nav title"><h1 class="mui-title">邀请好友</h1><a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"><span>返回</span></a><a class="mui-btn mui-btn-link mui-pull-right" href="">我的推广</a></header>  <!--主体区域 开始--><div class="mui-content" style="position: relative;"><img class="bg1" src="static.docs/images/invite/bg4.jpg" /><div style="position: relative;top:-120px;box-sizing: border-box;padding: 30px;"><div class="mui-card"><div class="mui-card-content"><div class="p-code-top"><p class="p-code-title">您的专属二维码</p><img src="static.docs/images/invite/ercode.jpg" alt="" width="50%"/><p style="font-size: 12px;">截图或打印二维码<br/>好友<font color="#B09252">扫一扫</font>即可注册</p></div><img src="static.docs/images/invite/bg4-line.jpg" alt="" width="100%"/><p class="p-codetip1">您的邀请码</p><p id="yqcode">BTWH762h</p><textarea id="textarea" style="width:0px;height:0px;position: fixed;top: 0;left: 0;z-index: -10;">这是幕后黑手</textarea><p style="text-align: center;font-size: 14px;"><button class="mui-btn mui-btn-warning copybtn" id="toastBtn">复制</button></p><p class="p-codetip2"><span onclick="copyURL()">点此复制注册链接</span></p><p class="p-code-shouyi">每邀请一位好友注册并消费后，您将获得<font color="#B09252">相应的</font>收益</p></div></div></div></div><script src="static.docs/plugins/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script><script src="static.docs/js/jquery.min.3.1.0.js"></script><script type="text/javascript">// 复制var result = $("#yqcode").html();document.getElementById("toastBtn").addEventListener('tap', function() {var yqcode = document.getElementById("yqcode").innerText;var textarea = document.getElementById("textarea");textarea.value = yqcode; // 修改文本框的内容textarea.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令mui.toast("复制成功");});function copyURL(){var url=location.href; var textarea = document.getElementById("textarea");textarea.value = url; // 修改文本框的内容textarea.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令mui.toast("复制成功");}</script>
</body>
</html>

注意代码：

<textarea id="textarea">这是幕后黑手</textarea>style="width:0px;height:0px;position: fixed;top: 0;left: 0;z-index: -10;"// 不能直接 display:none;  否则，不支持复制！

附：javascript监听键盘事件 - 如表单enter回车提交

以上就是关于 “ js点击复制文本 - 案例篇 ” 的全部内容。

js点击复制文本 - 案例篇相关推荐

JS点击复制按钮复制相关内容
网上是不是看到一些点击复制然后就自动把网址.文本内容自动复制呢,现在教大家如何实现一.点击复制文本框内容的代码(1) <script type="text/javascript&qu ...
【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
js方法点击复制文本
copy(data) { //复制文本let url = data;let oInput = document.createElement('input');oInput.value = url;do ...
JS 点击复制Copy
1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...
微信小程序点击复制文本到剪切板，获取剪切板内容
设置剪切板:wx.setClipboardData 获取剪切板:wx.getClipboardData api:https://developers.weixin.qq.com/miniprogram ...
H5移动端完美实现点击复制文本的解决方法，已经自测！
简介当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容.这个方法的命令 ...
js点击复制隐藏域值
<html> <head></head> <body> <script src="https://code.jquery.com/jqu ...
前端点击复制文本无需插件
// 复制文本copyText(text) {navigator &&navigator.clipboard &&navigator.clipboard.writeTe ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...

js点击复制文本 - 案例篇

文章目录

js点击复制文本：代码+效果图

效果图 · 示下：

html 代码如下：

注意代码：

附：javascript监听键盘事件 - 如表单enter回车提交

js点击复制文本 - 案例篇相关推荐

最新文章

热门文章

js点击复制文本 - 案例篇

文章目录

js点击复制文本 ：代码+效果图

效果图 · 示下：

html 代码如下：

注意代码：

附：javascript监听键盘事件 - 如表单enter回车提交

js点击复制文本 - 案例篇相关推荐

最新文章

热门文章

js点击复制文本：代码+效果图