js 实现点击复制文本内容
js 实现点击复制文本内容
<table>
<tr><td>姓名:<span onclick="copyContent(this);" title="点击复制">张 三</span></td></tr>
<tr><td>姓名:<span onclick="copyContent(this);" title="点击复制">李 四</span></td></tr>
</table> <input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/> <script type="text/javascript">
function copyContent(ElementObj){
//获取点击的值
var clickContent = ElementObj.innerText;
//获取要赋值的input的元素
var inputElement = document.getElementById("copy_content");
//给input框赋值
inputElement.value = clickContent;
//选中input框的内容
inputElement.select();
// 执行浏览器复制命令
document.execCommand("Copy");
//提示已复制
alter('已复制'); }
</script>
select() 方法只对 <input> 和 <textarea> 有效,所以,要获取到点击的值,放到input标签中,再选中复制。
js 实现点击复制文本内容的更多相关文章
- Vue实现点击复制文本内容(原生JS实现)
需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
- 对于pycharm和vscode下,从外部复制文本内容为python字符串内容是会自动加\u202a解决办法
先来看下这个python3源代码,表面上看没有语法毛病,如果源代码字符串内容是手动复制过来的文本内容,在pycharm和vscode下始终提示: pywintypes.error: (2, 'Shel ...
- js复制文本内容到剪贴板
记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...
- 一段js实现复制文本内容到剪切板
<script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...
- js点击复制文本
// 动态创建 input 元素 var aux = document.createElement("input"); // 获得需要复制的内容 aux.setAttribute( ...
- jQuery按钮复制文本内容
这种方法能保证文本内容被复制到windows剪切板,代码示例是复制url <!doctype html> <html> <head> <meta charse ...
- 【Html】Clipboard.js 实现点击复制,剪切板操作
可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...
- js实现点击复制网页内容(基于clipboard.js)
浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...
随机推荐
- Vue中引入TradingView制作K线图
**前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...
- CentOS 7 配置OpenCL环境(安装NVIDIA cuda sdk、Cmake、Eclipse CDT)
序 最近需要在Linux下进行一个OpenCL开发的项目,现将开发环境的配置过程记录如下,方便查阅. 完整的环境配置需要以下几个部分: 安装一个OpenCL实现,基于硬件,选择NVIDIA CUDA ...
- 20188472 https://www.cnblogs.com/chenzg90826/
我是一名学计算机的大一学生,对学计算机比较感兴趣,但是对于计算机的了解程度还不够深,所以我在这方面还只是一个初学者.经过了一个学期对计算机和编程语言的学习,我觉得要真正的学好这门专业真的还要更努力.在 ...
- BugBash活动分享
此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. BugBash源至微软概念,翻译为<缺陷大扫除>,顾名思义是集中大家力量全面清扫Bug,确保产品质 ...
- Linux IP怎么设置
最常用的给网卡配置ip的命令为#ifconfig eth0 192.168.0.1 但是,这样重启后又打回原形.要想永久保存,需要 vim /etc/sysconfig/network-scripts ...
- IDEA界面创建Scala的Maven项目
1. 创建Maven工程,勾选右侧的Create from archetype选项,然后选中下方的scala-archetype-simple选项,如图所示:2. 填写相应的GroupId.Artif ...
- Nginx从入门到放弃-第4章 深度学习篇
4-1 Nginx动静分离_动静分离场景演示 4-2 Nginx动静分离_动静分离场景演示1 4-3 Nginx的动静分离_动静分离场景演示2 4-4 Rewrite规则_rewrite规则的作用 4 ...
- 【bzoj2400】Spoj 839 Optimal Marks 网络流最小割
题目描述 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. 给你一个有n个结点m条边的无向图.其中的一些点的值是给定的,而其余的点的值由你 ...
- 【bzoj1585】[Usaco2009 Mar]Earthquake Damage 2 地震伤害 网络流最小割
题目描述 Farmer John的农场里有P个牧场,有C条无向道路连接着他们,第i条道路连接着两个牧场Ai和Bi,注意可能有很多条道路连接着相同的Ai和Bi,并且Ai有可能和Bi相等.Farmer J ...
- 【bzoj3680】吊打XXX 随机化
题目描述 gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将n个gty吊在n根绳子上,每根绳子穿过天台的一个洞.这n根绳子有 ...