之前在工作中，有位同事问过我一个问题，JS如何实现点击复制功能。给他解决后现在来总结归纳一下，顺便做个笔记。

PS：此乃本人第一篇博客（跟着同事大佬学习），涉及知识尚浅，如有任何意见和建议请告知于我。下面开始正文：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>源生JS实现点击复制功能</title>

</head>

<body>

<button onclick="clkCopy()">点击复制</button>

<input type="text" id="text" value="123">

<script>

    function clkCopy() {

        var text = document.getElementById("text");

        text.select();

        document.execCommand('copy');

        alert("复制成功！");

    }

</script>

</body>

</html>

通过DOM元素的select()方法可以选择到<input>和<textarea>中的文字，再调用document.execCommand('copy');实现复制功能。

那么，如果我们想要复制<div>中的内容，可以用上述方法嘛？经测试，使用上述方法点击复制<div>中的内容会报错

那么我们可以使用如下方法来实现此功能：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>源生JS实现点击复制功能</title>

</head>

<body>

<button onclick="clkCopyDiv()">点击复制</button>

<div id="div">123</div>

<script>

    function clkCopyDiv() {

        var text = document.getElementById("div");

        var selection = window.getSelection();

        var range = document.createRange();

        range.selectNodeContents(text);

        selection.removeAllRanges();

        selection.addRange(range);

        document.execCommand('copy');

        alert("复制成功！");

    }

</script>

</body>

</html>

源生JS实现点击复制功能的更多相关文章

  1. js点击复制功能的实现

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  3. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

  4. cocos2d JS 源生js实现each方法

    javascript笔记——源生js实现each方法   出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里 ...

  5. 页面中php传值后循环列表js获取点击的id

    页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...

  6. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  7. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...

  8. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

  9. js实现点击不同的按钮后各自返回被点击的次数

    js实现点击不同的按钮后各自返回被点击的次数 一.总结 1.注意:返回的不是三个按钮总的点击数,而是每一个的 2.用全局变量的话每一个按钮要多一个函数,用闭包就很方便 二.js实现点击不同的按钮后各自 ...

随机推荐

  1. pcntl_signal(): Error assigning signal

    错误原因:SIGSTOP(19)和SIGKILL(6)两个信号不能使用,进程间通信换成其他信号量就好了.

  2. mysql中where和having子句的区别和具体用法

    1.mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having ...

  3. Redis Cluster 的数据分片机制

    上一篇<分布式数据缓存中的一致性哈希算法> 文章中讲述了一致性哈希算法的基本原理和实现,今天就以 Redis Cluster 为例,详细讲解一下分布式数据缓存中的数据分片,上线下线时数据迁 ...

  4. VS2019 开发Django（八）------视图

    导航:VS2019开发Django系列 这几天学习了一下Django的视图和模板,从这几天的学习进度来看,视图这里并没有花很多的时间,相反的,模板花费了大量的时间,主要原因还是因为对Jquery操作d ...

  5. Caffe源码-Net类（上）

    Net类简介 Net类主要处理各个Layer之间的输入输出数据和参数数据共享等的关系.由于Net类的代码较多,本次主要介绍网络初始化部分的代码.Net类在初始化的时候将各个Layer的输出blob都统 ...

  6. 转自自己的关于落谷计数器【p1239】的题解

    本蒟蒻写这道题用了两天半里大概五六个小时.(我太弱了) 然后这篇题解将写写我经历的沟沟坎坎,详细的分析一下, 但是由于它很长,因此一定还有多余的地方,比如说我的 预处理,可能比较多余.但是我觉得,信息 ...

  7. PWN INTEGER OVERFLOW 整数溢出

    0x00      Preview Last few passage I didn't conclude some important points and a general direction o ...

  8. Java连载62-使用throws关键字处理异常

    ​一.处理异常的两种方式 1.所有的编译时异常,要求程序员在编写程序阶段,必须对它进行处理,如果不处理的话,编译就会无法通过,处理异常有两种方法:捕捉和声明抛出. 2.捕捉:try.....catch ...

  9. Android 项目优化（六）：项目开发时优化技巧总结

    在之前我们讲了很多能够优化 Android 开发项目质量的方案,这些方案更多的是从一些比较专精的方向切入的,阐述的是一些比较重要且独立的优化方案. 本文我们将总结一下在日常开发过程中我们能够使用的一些 ...

  10. Maven——向Maven本地仓库中手动添加依赖包（ps：ojdbc.jar）

    maven中央仓库中并非包含所有现有的依赖包和插件,部分依赖包和插件需要手动地进行添加(如ojdbc.jar) 一.添加JDK系统环境变量(maven是基于Java的,可参考:https://www. ...