一、原理分析

浏览器提供了 copy 命令 ,可以复制选中的内容

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 两个输入框有效,所以要设置一个用这两个标签的缓存区域

//要拿到的文字
<button 'data-text'='待复制文字' onclick='copy(this)'> //html部分,缓存拿到的值,透明为0才行,隐藏是不行的
<textarea style="opacity: 0;" id="txt"></textarea> //js方法
function copy(obj){
var content = $(obj).attr('data-text');
$("#txt").val(content);
var txt=document.getElementById("txt");
txt.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
layer.msg('已复制,可粘贴');
}

js复制文字的更多相关文章

  1. js 复制文字、 复制链接到粘贴板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. clipboard.js复制文字

    A-固定内容: <script type="text/javascript" src="script/clipboard.min.js"></ ...

  3. 使用js 复制 文字到剪贴板

    有一个好插件 https://clipboardjs.com/ 兼容性  IE9+ 一般基本够用,但如果非要兼容IE8 可使用IE 特有的 方法 window.clipboardData.setDat ...

  4. 点击复制文字到剪贴板兼容性安卓ios

    一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...

  5. 使用JS实现文字搬运工

    使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...

  6. js 实现文字滚动功能,可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  7. js复制

    JS实现各种复制到剪贴板 一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript" ...

  8. js实现文字截断

    先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...

  9. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

随机推荐

  1. JS中如何使用EL表达式中的对象

    JS中如何使用EL表达式中的对象 2017年09月25日 15:33:09 lhpnba 阅读数:4859   1.js中使用el表达式要加双引号或单引号:'${list}' 2.js变量获取el表达 ...

  2. HTTP协议格式【转】

    原文链接:https://www.jianshu.com/p/8fe93a14754c 一.URI结构 HTTP使用统一资源标识符(URI)来传输数据和建立连接.URL(统一资源定位符)是一种特殊种类 ...

  3. 洛谷P1558 色板游戏

    题目背景 阿宝上学了,今天老师拿来了一块很长的涂色板. 题目描述 色板长度为L,L是一个正整数,所以我们可以均匀地将它划分成L块1厘米长的小方格.并从左到右标记为1, 2, ... L.现在色板上只有 ...

  4. ppt述职摘要

    1.工作总结 1)做了什么 2)做的怎么样 3)还要做什么 2.个人成长和团队成长 3.个人目标和团队目标 1)时间+量化(具体说明) 2)预期效果 3)团队凝聚力 4.展望

  5. Google protocol buffer的配置和使用(Linux&&Windows)

    最近自己的服务器做到序列化这一步了,在网上看了下,序列化的工具有boost 和google的protocol buffer, protocol buffer的效率和使用程度更高效一些,就自己琢磨下把他 ...

  6. Qt ------ QElapsedTimer 计算消耗多少时间

    The QElapsedTimer class provides a fast way to calculate elapsed times. The QElapsedTimer class is u ...

  7. Python基础之面向对象(进阶篇)

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  8. [LeetCode] 29. Divide Two Integers ☆☆

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  9. Ajax笔记-加强版

    AJAX :   Asynchronous JavaScript and XML 异步JavaScript和XML   用javascript异步形式去操作xml 进行数据交互   节省用户操作,时间 ...

  10. Codeforces 221 B. Little Elephant and Numbers

    B. Little Elephant and Numbers time limit per test 2 seconds memory limit per test 256 megabytes inp ...