js 复制div文本

实现的效果如下图所示：（注：图是第三种方法）

复制完成后就直接ctrl+v粘贴就行了：

1. 第一种方法，运用隐藏textarea来实现复制

    <div style="padding-bottom:10px"  id="copyId">水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水</div><textarea id="input" ></textarea><button type="button" (click)="copy()"></button>

ts中的执行方法是：

  copy(){var text = document.getElementById("copyId").innerText;var input = document.getElementById("input");input.textContent = text; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令}

css的设置为：

#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}

2. 第二种办法：虚拟一个新建一个div

var oInput = document.createElement('input');oInput.value = "sssssssssssss";document.body.appendChild(oInput);oInput.select(); // 选择对象document.execCommand("Copy"); // 执行浏览器复制命令oInput.className = 'oInput';oInput.style.display = 'none';

3. 第三种方法，windows选中的方法

    <div style="padding-bottom:10px"  id="copyId">水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水</div><button type="button" (click)="copy()"></button>

ts的执行方法是：

  copy() {var val = document.getElementById('copyId');window.getSelection().selectAllChildren(val);document.execCommand("Copy");}

本文参考文献：1. 原生 js 实现点击按钮复制文本 - Wise.Wrong - 博客园

2. js复制隐藏域中的文字 - ⁬ - 博客园

js 复制div文本相关推荐

js复制富文本/网页内容到黏贴板
很多js的类库都可以实现复制内容到黏贴板的功能,但是对于富文本的支持却不一定好. 你的应用如果能实现富文本的复制将可以使用户方便的黏贴到其他各种编辑器中,这将是极好的. 使用场景对于复制富文本的需求 ...
vue js 复制div区域内容
<div class="Invoice-cont" id="copyAll"> <div>1234</div> <di ...
关于js复制文本信息（按钮级别）
最近应产品要求,需要实现一个按钮级别热复制文本功能,效果就是单击按钮复制对应的文本,该文本是需要从数据库里面取出来然后加密的,最初的打算是使用js插件在前台页面搞定. 于是上网找了一些相关资料, ...
jQuery/Js复制文本到剪贴板
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...
js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
js复制文本（带文本格式or不带文本格式）
1.js仅直接复制文本(修复ios会自动弹出键盘的问题) const input = document.createElement('input'); document.body.appendChil ...
js复制文本到剪贴板_如何将输出文本从命令行复制到Windows剪贴板
js复制文本到剪贴板 If you're doing work at the command line on your Windows box, it's sometimes useful to co ...
js复制文本到剪贴板_如何将文本和图像固定到Windows 10的剪贴板历史记录
js复制文本到剪贴板 Windows 10 makes copy and paste more convenient with a feature called Clipboard history. ...
Web js复制文本到粘贴板
Web js复制文本到粘贴板一.简述记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果三.代码 <!DOCTYPE html> <html><head&g ...

js 复制div文本

js 复制div文本相关推荐

最新文章

热门文章