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. root/base/stem概念

    The verb root (or base form): 1.is the same as the infinitive不定式 (e.g., to dive, to jump, to wonder) ...

  2. MyBatis like函数使用注意事项

    百分号后面必须要加上空格,不然会将后面的字符串全部都黏在一起,导致sql语句运行报错

  3. BFS广度优先搜索 炸弹人

    题面:一个人在一个坐标放炸弹,请问可以可以杀死的敌人数目最大是,并且输出该点的坐标 G代表敌人 .代表该位置可以走 "#"代表该位置存在障碍物 并且防止炸弹的蔓13 13 3 3 ...

  4. c++——基本概念

    如何理解c/c++中的指针?每种编程语言都使用指针,但Java.c#等将指针隐藏,而c/c++将指针暴露给了用户(程序员)https://www.cnblogs.com/gxcdream/p/4805 ...

  5. Manjaro启动项目及服务配置备忘

    Manjaro启动项目及服务配置备忘 =============== 系统服务GUI管理搜索 systemdgenie 并安装,类似Windows的服务管理. ================ 系统启 ...

  6. 斐波那契数列的生成 %1e8 后的结果

    方法一  用数组开,一般开到1e7,1e8 左右的数组就是极限了   对时间也是挑战 #include<bits/stdc++.h> using namespace std; ; int ...

  7. STM32F4的sct文件理解

    原文地址http://blog.sina.com.cn/s/blog_898f36590100ya2l.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  8. javascript的一些常用知识点

    1. 查看你的html文档中一共有多少个节点 :   document.getElementsByTagName(" * ").length; 2.  document.getEl ...

  9. day07 hadoop里面的RPC框架使用

    PS: RPC远程调用 Webservice啥的都是远程调用.下面简单介绍其使用过程 Hadoop已经实现了RPC框架,不用我们自己写,不过需要我们注意几点:1.发布服务端和客户端必须包名相同 1.服 ...

  10. redux笔记 进阶

    1 拆分UI组件和容器组件 import React from 'react' const AppUI = (props) =>{ return ( <div className=&quo ...