JavaScript 点击触发复制功能实例详解

摘要：

js调用复制功能使用:

document.execCommand("copy"， false);

document.execCommand()方法功能很强大，了解更多请戳：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

正文：

调用以上方法，就实现了copy功能，可是，在调用之前，你需要先选中需要复制的内容。

选中需要复制的内容可使用select()方法，然而该方法只能选中input或者textarea标签里的内容。

因此，如果你想实现点击一个按钮，就复制一段话的功能

第一：如果这段话是被input或textarea标签包裹，则可以直接只用select()，

第二：如果是其他任意标签包裹的话，则需要新creat一个input标签，给该input标签赋value，然后使用select()方法，最后将该input标签remove了。

完整代码：

function copy(that){
var inp =document.createElement('input'); // create input标签
document.body.appendChild(inp) // 添加到body中
inp.value =that.textContent // 给input设置value属性为需要copy的内容
inp.select(); // 选中
document.execCommand('copy',false); // copy已经选中的内容
inp.remove(); // 删除掉这个dom
}
<p onclick="copy(this)">hello man</p>

小知识点：

1：select()使用范围；

2：删除一个dom，使用node.remove();

3：调用复制功能使用document.execCommand()方法;

参考链接：

https://stackoverflow.com/questions/45071353/javascript-copy-text-string-on-click

总结

以上所述是小编给大家介绍的JavaScript 点击触发复制功能 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by wuyakun on 2017/5/23. */let wxUtils = {}; /** * 是否开启右上角Menu * @param open */ wxUtils.optionMenu = function (open = true) { if (open) { openOptionMenu(); } else { disabledOptionMenu(); } }; /** * 是否禁用右上角 */

  • 使用clipboard.js实现复制功能的示例代码

    最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制.在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现.因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好.下面简单介绍一下它的用法. 引入插件,可以下载,也可以使用第三方cdn. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></sc

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo

  • js实现复制功能(多种方法集合)

    1.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target

  • js+html5实现复制文字按钮

    js+html5实现复制文字按钮

    本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下 图片展示: 注意css中的样式,有些页面复制不成功就是没有添加那一句造成的. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type=

  • JavaScript 点击触发复制功能实例详解

    摘要: js调用复制功能使用: document.execCommand("copy", false); document.execCommand()方法功能很强大,了解更多请戳:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 正文: 调用以上方法,就实现了copy功能,可是,在调用之前,你需要先选中需要复制的内容. 选中需要复制的内容可使用select()方法,然而该方法只能选中input或者

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • Javascript的无new构建实例详解

    Javascript的无new构建实例详解

    看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下 第一种方式: var A = function(){ return A.prototype.init(); } A.prototype = { init:function(){ this.age = 50; console.log(this); return this; }, age:100 } console.log(A() === new A()); 1.分析下结果为什么为true

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript“尽快失败”的原则实例详解

    我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal

  • JavaScript数组reduce()方法使用实例详解

    JavaScript数组reduce()方法使用实例详解

    目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer

  • JavaScript实现随机点名器实例详解

    JavaScript实现随机点名器实例详解

    你是公司的程序员,年会的时候公司要给员工抽奖发福利,要求你写一个页面小程序,用来随机选出幸运员工,分设一二三等奖大致如下图示例: 以下是点名器的一种思路,页面比较简陋,只给出了满足最基本要求的代码户要用到计时器,随机数函数等 本抽奖一二三等奖都只设一名幸运员工,开始结束功能用一个按钮实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript Dom 绑定事件操作实例详解

    JavaScript Dom 绑定事件操作实例详解

    本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作.分享给大家供大家参考,具体如下: JavaScript  Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus // 谁调用这个函数,这个this就指向谁 this:当前出发事件的标签.全局对象 window 一.绑定方式 <input id='

  • JavaScript反射与依赖注入实例详解

    本文实例讲述了JavaScript反射与依赖注入.分享给大家供大家参考,具体如下: 对于javascript中的反射的理解,一直都是认为,利用数组对回调函数进行保存,之后在适当的时刻利用call或是apply 方法,对回调进行调用即可,一般如下操作: 首先定义两个方法: var service = function() { return { name: 'Service' }; } var router = function() { return { name: 'Router' }; } 我们

  • JavaScript面向对象之七大基本原则实例详解

    本文实例讲述了JavaScript面向对象之七大基本原则.分享给大家供大家参考,具体如下: 面向对象编程有自己的特性与原则,如果对于面向对象有一些了解的话,面向对象三大特征,封装.继承.多态,如果对面向对这三个概念不太了解,请参考面向对象之三个基本特征(javaScript) 单一职责 如果我们在编写程序的时候,一类或者一个方法里面包含了太多方法,对于代码的可读性来说,无非是一场灾难,对于我们来说.所以为了解决这个问题,出现了单一职责. 什么是单一职责 单一职责:又称单一功能原则,面向对象五个基

随机推荐