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. springboot下https证书配置

    没有证书的小伙伴首先申请一个阿里云免费证书,按照我的步骤来操作 1.购买页面是这样的 按照顺序选择 神奇的一幕出现了 然后就去购买成功,我们会看到证书没有签发,我们需要去申请 填写需要绑定的域名 一般 ...

  2. Vue之数据传递

    基础:vue的响应式规则 简单的props更新 父组件 <template> <div> <block-a :out-data="x">< ...

  3. 【网络基础】【TCP/IP】私有IP地址段

    私有IP地址段 Class A:10.0.0.0    - 10.255.255.255 Class B:172.16.0.0  - 172.31.255.255 Class C:192.168.0. ...

  4. 03 Django视图

    功能 接受Web请求HttpRequest,进行逻辑处理,与 M 和 T 进行交互,返回 Web 响应 HttpResponse 给请求者 示例项目的创建 创建项目 test3 django-admi ...

  5. Python 变量作用域 LEGB (上)—— Local,Global,Builtin

    Python 变量作用域的规则是 LEGB LEGB含义解释:L —— Local(function):函数内的名字空间E —— Enclosing function locals:外部嵌套函数的名字 ...

  6. Anaconda的安装、使用以及与PyCharm的链接

    初学Python的盆友们是否有这样的疑惑: 选择Python2还是Python3呢?(后者并不完全兼容前者) 听说两者可以同时安装,那怎么管理呢? Python那么丰富的第三方库,一个一个装太麻烦啦 ...

  7. octave-basic

    在coursera上斯坦福的machine learning,lecturer极力推荐开源的编程环境Octave入手,所以我也下载了来试一试吧== 参考链接:http://www.linuxdiyf. ...

  8. Find a way HDU - 2612(bfs)

    Find a way Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. Kubernetes(k8s)底层网络原理刨析

    目录 1 典型的数据传输流程图 2 3种ip说明 3 Docker0网桥和flannel网络方案 4 Service和DNS 4.1 service 4.2 DNS 5 外部访问集群 5.1 外部访问 ...

  10. Windows下新建多级文件夹

    使用system函数调用系统命令"md" 注意:字符串变量的话赋值时要使用双斜杠"\\": system("md C:\\newfolder\\&qu ...