HTML 鼠标点击复制元素内容

Intro

效果展示

方法封装

copyInnerTextOfCell = (event) => {let innerText = event.target.innerText;var tmpInput = document.createElement("input");document.body.appendChild(tmpInput);tmpInput.value = innerText;tmpInput.select();document.execCommand("cut"); // copytmpInput.remove();alert("复制成功！" + innerText);
}

原理、兼容性、替代方案
官网文档：< https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand>
- 实现原理：使用了DOM原生的API document.execCommand(commandStr)
  当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
- 兼容性：已废弃。
- 替代方案/趋势：将来会被 Clipboard替代(需要用户授权后才能运行相关API)。

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>wuyujin1997</title><script>copyInnerTextOfCell = (event) => {let innerText = event.target.innerText;var tmpInput = document.createElement("input");document.body.appendChild(tmpInput);tmpInput.value = innerText;tmpInput.select();document.execCommand("cut"); // copytmpInput.remove();alert("复制成功！" + innerText);}</script>
</head>
<body><p onclick="copyInnerTextOfCell(event)">这是 p 标签内容</p><div onclick="copyInnerTextOfCell(event)">这是 div 标签内容</div><span onclick="copyInnerTextOfCell(event)">这是 span 标签内容</span></body>
</html>

其实核心代码就是通过 execCommand(“copy”) 把某些文本复制到系统剪贴板。

至于是单击触发onClick事件，
还是双击触发onDbClick事件，
亦或是鼠标右键触发onContextMenu事件，
或其他事件，都可以成为这个复制操作的触发点动作。

HTML 鼠标点击复制元素内容相关推荐

【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
JS实现点击复制目标内容
在实际应用中,我们经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:se ...
vue中实现点击复制文本内容之clipboard
项目中有些场景需要点击复制某段内容并粘贴的功能如点击复制名称,订单号,文章段落等需要先安装引入使用对应的方法 1.安装 npm install clipboard --save 2.引入直接 ...
点击复制input内容
function copyToClipboard() {var Url2 = document.getElementById("tuijianlianjie");Url2.sele ...
vue移动端点击复制文本内容
安装依赖包: npm install clipboard --save 在需要用到的vue文件导入: import Clipboard from 'clipboard'; import { Toast ...
Java鼠标自动点击及文件内容读取复制
为了避免某些重复工作,将固定的鼠标点击和内容复制工作用代码完成.public class shubiao {//时间间隔 1sfinal static int DELAY=1000;//文件路径fin ...
python爬虫模拟点击和输入_爬虫笔记关于鼠标点击和内容输入
1. 采用google浏览器(试验时有头浏览器方便检测,代码完成后改为无头浏览) from selenium importwebdriver## 1. 默认有头浏览器 driver =webdrive ...
【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容
前情提要有这样一个需求:每次重复选过滤条件太麻烦啦,需要一个可以复制过滤条件的功能!过滤条件类似下图. 主要步骤第一步:复制工具的选取.这里我选用的是原生的Document.execCommand ...
html 文本标签点击复制,点击复制-点击div或者p标签复制内容到剪切板
点击复制-点击div或者p标签复制内容到剪切板最近在做一个需求,就是需要点击div或者p标签需要复制其中的内容到剪切板中,可以快速的粘贴如图下所示: 1059788-201709041517163 ...

HTML 鼠标点击复制元素内容

Intro

HTML

More

HTML 鼠标点击复制元素内容相关推荐

最新文章

热门文章