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. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

  2. webapi core2.1 IdentityServer4.EntityFramework Core进行配置和操作数据

    https://identityserver4.readthedocs.io/en/release/quickstarts/8_entity_framework.html 此连接的实践 vscode ...

  3. python3 sort

    #https://docs.python.org/3.5/howto/sorting.html?highlight=sort #In Python 3.2, the functools.cmp_to_ ...

  4. whmcs模板路径

    whmcs网站根目录 比如你的域名是server.nongbin.vip,你需要cd /home/wwwroot/server.nongbin.vip,该目录下然后,cd template/ 给文件夹 ...

  5. Go Example--变量

    package main import "fmt" //通过import导入fmt标准包 func main() { //定义变量,并初始化 var a string = &quo ...

  6. uwsgi 报MemoryError

    网站部署后,基本一天有时候几个小时就会502,查看uwsgi日志看到,一直在报MemoryError的错 之前以为是python版本的问题,说是32位的python最多支持2G,但查看了python版 ...

  7. python 基础的用法新发现

    引用的发现: # 引用的处理 因为变量指的是某一内存地址 引用变量实际是引用一个固定的内存地址,# 当这个变量中的内容变了之后,他的内存地址不变, 所以引用者也动态的得到了变化的变量l1=[1,2,3 ...

  8. 使用nexus 管理pip 私有包

    nexus 已经支持了对于python pip 包的管理(支持group,host,proxy) 这个是一个简单的使用docker 运行的demo,同时集成了s3 存储,以及 一个为了测试简单的自定义 ...

  9. kustomize 模版自由的配置&&自定义kubernetes工具

    kustomize 是一个可以方便我们基于模版配置,自定义kubernetes 的工具,类似kompose,但是个人觉得kompose 更灵活点,而且使用上更方便 安装 mac brew instal ...

  10. windows 8，关闭随意窗体都提示“已停止工作”的解决的方法

           电脑用的好好的,突然出现了关闭随意窗体都提示"已停止工作",每次都是这样.想想也就是偶尔优化一下,近期也没有改动过什么系统设置呀,突然想到昨晚JLink_V8固件丢失 ...