js 复制文本到剪贴板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点击复制到剪贴板</title>

</head>

<body>

    <div id="app">

        <p>博客园是最棒的!</p>

        <button id="copy">点击复制</button>

    </div>

    <script>

        var btn = document.getElementById('copy');

        var val = document.getElementsByTagName('p')[0].innerText;

        btn.onclick = function(){

            var tempInput  = document.createElement('input');

            tempInput.value = val;

            document.body.appendChild(tempInput );

            tempInput.select(); // 选择对象

            document.execCommand("Copy"); // 执行浏览器复制命令

            tempInput.className = 'tempInput ';

            tempInput.style.display='none';

            document.body.removeChild(tempInput );//移除

        }

    </script>

</body>

</html>

js 复制文本到剪贴板的更多相关文章

  1. js复制文本到剪贴板

    execCommand是document的一个方法,返回值是布尔值(true,false) true表示操作被支持,false表示操作不被支持 此方法只针对于input和textarea,对里面的内容 ...

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

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

  3. ZeroClipboard – 轻松实现复制文本到剪贴板功能

    ZeroClipboard 库提供了一种把文本复制到剪贴板的简单方法.Zero 表示该库是不可见的,用户界面则完全取决于你. 该库完全兼容 Flash Player 10.0.0 或以上版本,这就要求 ...

  4. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  5. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  6. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

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

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

  8. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

  9. 使用原生 JS 复制文本兼容移动端 iOS & android

    注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设 ...

随机推荐

  1. NOI-1.1-08-字符三角形

    08:字符三角形 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个字符,用它构造一个底边长5个字符,高3个字符的等腰字符三角形. 输入 输入只有一行, 包含一个字符. 输出 ...

  2. Windows 下使用nginx命令启动

    http://wanganwu.blog.163.com/blog/static/7788722012322111417966/ Windows下Nginx的启动.停止等命令 在Windows下使用N ...

  3. Vue.js学习使用心得（三）

    一.计算属性 计算属性关键词: computed <body> <div id="app"> <p>原始字符串: {{ message }}&l ...

  4. java-类与类，类与接口，接口与接口的关系

    1.类与类: - 继承关系,只能单继承,可以多层继承. 2.类与接口: - 实现关系,可以单实现,也可以多实现. - 并且还可以在继承一个类的同时实现多个接口. - * 例:class Demo ex ...

  5. hdu5173 How Many Maos Does the Guanxi Worth

    #include<bits/stdc++.h> using namespace std; #define INF 0x3f3f3f3f ]; ]; ][]; void dijkstra(i ...

  6. 浮动IP(Floating IPs)：开始构建你的高可用性的应用

    高可用性是所有生产环境的关键.开发者因此可以高枕无忧因为他们知道他们的应用被设计为可以承受住故障. 今天,我们非常激动的宣布我们应用了浮动IP技术.浮动IP指的是一个IP地址可以立即从一个Drople ...

  7. 验证远程主机SSH指纹

    转自:https://marskid.net/2018/02/05/how-to-verify-ssh-public-key-fingerprint/ 使用SSH进行远程连接新的主机的时候,经常会看到 ...

  8. e.target和e.srcElement

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  9. 谈谈 SOA

    为什么要 讨论 SOA 呢 ? 请参考我写的另一篇文章 <论 微服务 和 Entity Framework 对 数据 的 割裂>    https://www.cnblogs.com/KS ...

  10. Learn ft=rom WTL: CXXImpl<T>

    // t9.cpp : Defines the entry point for the console application. // #include "stdafx.h" cl ...