一、原理分析

浏览器提供了 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. 【DP】【CF9D】 How many trees?

    传送门 Description 给你两个正整数\(n,h\),求由\(n\)个点组成的高度大于等于\(h\)的二叉树有多少个 Input 一行两个整数\(n,h\) Output 一个整数代表答案. ...

  2. MATLAB2010安装方法

    MATLAB2010安装方法 第一步选择无网络安装. 选择yes,然后点击next 激活序列号在crack文件夹中的txt文档中 这一步按照图片上的显示操作就可以 选择经典安装 按提示操作,这一步事激 ...

  3. Hdu1542 Atlantis

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  4. Qt ------ 判断运行在何种系统下

    #ifdef Q_OS_WIN // Windows上的代码 #endif #ifdef Q_OS_LINUX // Linux上的代码 #endif #ifdef Q_OS_MAC // Mac上的 ...

  5. mysql 查询小demo

    两张表的的结构如下,需求是写出从one表到two表和从two表到one表的查询转换. create table student_one( name varchar(50) default '' not ...

  6. spring boot 使用logback日志系统的详细说明

    springboot按照profile进行打印日志 log4j logback slf4j区别? 首先谈到日志,我们可能听过log4j logback slf4j这三个名词,那么它们之间的关系是怎么样 ...

  7. Spring bean - scope详解

    Scope是定义Spring如何创建bean的实例的. 在创建bean的时候可以带上scope属性,scope有下面几种类型. Singleton 这也是Spring默认的scope,表示Spring ...

  8. 每个Web开发者都需要具备的9个软技能

    对于一份工作,你可能专注于修炼自己的内功,会在不自觉中忽视软技能.硬技能决定你是否能得到工作,而软技能能够表明你是否适合这份工作和适应工作环境等.所有的公司都有属于自己的文化,并努力将这些文化传承下去 ...

  9. Spring Boot工程结构推荐

    工程结构(最佳实践) Spring Boot框架本身并没有对工程结构有特别的要求,但是按照最佳实践的工程结构可以帮助我们减少可能会遇见的坑,尤其是Spring包扫描机制的存在,如果您使用最佳实践的工程 ...

  10. 数据类型的判断 --Object.prototype.toString.call(obj)精准检测对象类型

    数据类型的判断 typeof typeof返回一个表示数据类型的字符串,返回结果包括:number.boolean.string.symbol.object.undefined.function等7种 ...