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 实现点击复制文本内容的更多相关文章

  1. Vue实现点击复制文本内容(原生JS实现)

    需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...

  2. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  3. 对于pycharm和vscode下,从外部复制文本内容为python字符串内容是会自动加\u202a解决办法

    先来看下这个python3源代码,表面上看没有语法毛病,如果源代码字符串内容是手动复制过来的文本内容,在pycharm和vscode下始终提示: pywintypes.error: (2, 'Shel ...

  4. js复制文本内容到剪贴板

    记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...

  5. 一段js实现复制文本内容到剪切板

    <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...

  6. js点击复制文本

    // 动态创建 input 元素 var aux = document.createElement("input"); // 获得需要复制的内容 aux.setAttribute( ...

  7. jQuery按钮复制文本内容

    这种方法能保证文本内容被复制到windows剪切板,代码示例是复制url <!doctype html> <html> <head> <meta charse ...

  8. 【Html】Clipboard.js 实现点击复制,剪切板操作

    可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...

  9. js实现点击复制网页内容(基于clipboard.js)

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

随机推荐

  1. 将远程分支拷贝到本地,并更新代码push到原分支

    第一步:git clone +主分支 第二步:git fetch origin 分支名 第三步:git checkout -b 分支名 origin/分支名 第四步:git pull origin 分 ...

  2. Vim如何显示和关闭行号

    显示行号: set nu 去除行号: set nonu

  3. 示例vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Vue 实现组件信息的缓存 当我们 ...

  4. UVALive - 8292 (法里数列)

    参考博客:zro https://blog.csdn.net/alusang/article/details/81840944 orz 给你一个分母 m 和一个浮点数 x,让你求出一个分母不超过 m ...

  5. POJ:1185-炮兵阵地(状压dp入门)

    炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组 ...

  6. debian7不能apt安装emacs24

    维护者在主页上 http://emacs.naquadah.org/ 提到: These packages are not maintained anymore I don't use these p ...

  7. nmap命令扫描存活主机

    1.ping扫描:扫描192.168.0.0/24网段上有哪些主机是存活的:   [root@laolinux ~]# nmap -sP 192.168.0.0/24 Starting Nmap 4. ...

  8. InnoDB Redo Flush及脏页刷新机制深入分析

    概要: 我们知道InnoDB采用Write Ahead Log策略来防止宕机数据丢失,即事务提交时,先写重做日志,再修改内存数据页,这样就产生了脏页.既然有重做日志保证数据持久性,查询时也可以直接从缓 ...

  9. python基础学习笔记——循环语句(while、for)

    while 循环 流程控制语句 while 1.基本循环 while 条件: # 循环体 # 如果条件为真,那么循环则执行 # 如果条件为假,那么循环不执行   2.break break 用于退出当 ...

  10. 添加字段的SQL语句的写法:

    alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参 --删除字段   -- alter table  [SolidDB].[dbo].tP ...