js实现复制内容到粘贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js复制内容到粘贴板</title>
<style>
.flex-r {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
}
.info {
max-width: 400px;;
margin-bottom: 20px;
background-color: bisque;
}
dl {
margin: 0;
padding: 0 30px;
width: 200px;
}
.copy{
cursor: pointer;
margin: 0 10px;
}
</style>
</head> <body>
<div class="bank_info">
<div class="flex-r info">
<dl class="flex-r aln-star">
<dt>收款银行：</dt>
<dd>建设银行</dd>
</dl>
<span class="copy" onclick="mmcopy(this)">复制</span>
</div>
<div class="flex-r info">
<dl class="flex-r aln-start">
<dt>收款账户名：</dt>
<dd>张三</dd>
</dl>
<span class="copy" onclick="mmcopy(this)">复制</span>
</div>
</div> <!--引入jQuery插件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
function mmcopy(e) {
if (document.execCommand("copy")) {
var txt = ""; // 需要复制的文字
txt += $(e)
.siblings("dl")
.find("dt")
.text();
txt += $(e)
.siblings("dl")
.find("dd")
.text();
const input = document.createElement("input"); // 创建一个新input标签
input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
input.setAttribute("value", txt); // 设置input value值为需要复制的内容
document.body.appendChild(input); // 添加input标签到页面
input.select(); // 选中input内容
input.setSelectionRange(0, 9999); // 设置选中input内容范围
document.execCommand("copy"); // 复制
document.body.removeChild(input); // 删除新创建的input标签
}
}
</script>
</body>
</html>
js实现复制内容到粘贴板的更多相关文章
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- js插件实现点击复制内容到粘贴板，兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- 原生js实现复制文本到粘贴板
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
- js复制内容到粘贴板
点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...
- vue 复制内容到粘贴板
首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...
- js 复制内容到粘贴板的兼容性
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
- vue复制textarea文本域内容到粘贴板
vue实现复制内容到粘贴板 方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...
- 用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将 ...
- js 复制文字、 复制链接到粘贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 一面（3） react方面
1.react的声明周期 getDefaultProps() getInitialState() componentWillMount() 以后组件更新不调用, 只调用一次 ...
- json元素顶部插入unshift、尾部插入push、顶部获取shift、尾部获取pop
1)json元素插入 var json=[ //顶部位置 {id:1,name:'B'}, {id:2,name:'C'}, {id:3,name:'D'}, //尾部位置 ] 顶部位置)json.u ...
- Linux相关问题总结
1.linux没有ifconfig命令 可以使用以下命令查询ip地址: ip addr show ifconfig命令在net-tools工具里,安装命令: yum install net-tools
- python的标识符
1.在pyhon中,标识符由字母.数字.下划线组成 2.在python中,所有标识符可以有字幕,下划线开头,但不能以数字开头 3.python的标识符是区分大小写的 4.以下划线开头的标识符是有特殊意 ...
- npm run dev 报错 run `npm audit fix` to fix them, or `npm audit` for details
前几天写的直接运行npm run dev还是ok的,突然不行了,前面报错是css-loader没有,删除style标签上的lang='scss'就好了,先不需要这个依赖.这个先不管. 只是后面的 ru ...
- jmeter下载和配置
一.下载 1.进入官网:http://jmeter.apache.org/ 3.环境变量相关配置 电脑桌面---->“计算机”图标---->鼠标右键选择“属性”---->点击高级系统 ...
- matlab2017b
https://blog.csdn.net/m0_37638031/article/details/78982498
- CenOS 更换yum源
说明: 更换CentOS yum源既是修改配置文件/etc/yum.repos.d/CentOS-Base.repo. 目前有很多公司都提供yum源文件的下载,所以我们可以不需要去修改这个文件,直接从 ...
- python-2018.03.03
本周用python实现了 1.通过svn模块检出远程代码到本地(ps:修改了windows svn的一个编码模块的小bug),并通过调用MSbuild 编译.发布并打包发布后的代码 (注:以上需要安装 ...
- c语言——鞍点
描述 找出具有m行n列二维数组Array的“鞍点”,即该位置上的元素在该行上最大,在该列上最小,其中1<=m,n<=10. 输入 输入数据有多行,第一行有两个数m和n,下面有m行,每行有n ...