之前在工作中，有位同事问过我一个问题，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. JS-变量、作用域、垃圾回收机制总结

    预解析时变量和函数同名的话,保留函数

  2. JS内置对象-Array之indexOf和lastIndexOf

    indexOf() var num = [1, 7, 2, 3, 4, 7, 9] var pos = num.indexOf(7) var pos1 = num.indexOf(7, 2) cons ...

  3. Elasticsearch系列---搜索分页和deep paging问题

    概要 本篇从介绍搜索分页为起点,简单阐述分页式数据搜索与原有集中式数据搜索思维方式的差异,就分页问题对deep paging问题的现象进行分析,最后介绍分页式系统top N的案例. 搜索分页语法 El ...

  4. JAVA Socket API与LINUX Socket API探究

    代码 这是一个带有UI界面的JAVA网络聊天程序,使用Socket连接完成通信. JAVA服务端程序 import java.io.IOException; import java.io.InputS ...

  5. python同步IO编程——StringIO、BytesIO和stream position

    主要介绍python两个内存读写IO:StringIO和BytesIO,使得读写文件具有一致的接口 StringIO 内存中读写str.需要导入StringIO >>> from i ...

  6. C#线程学习笔记八：async & await入门一

    一.涉及内容 async & await是C# 5.0引入的,控制台输出所使用的$符号(拼接字符串)是C# 6.0引入的,其功能类似于string.Format()方法. 二.多线程.异步.同 ...

  7. C#中怎样获取默认配置文件App.config中配置的键值对内容

    场景 在新建一个程序后,项目中会有一个默认配置文件App.config 一般会将一些配置文件信息,比如连接数据库的字符串等信息存在此配置文件中. 怎样在代码中获取自己配置的键值对信息. 注: 博客主页 ...

  8. C#中提示：当前上下文中不存在名称“ConfigurationManager”

    场景 想要在程序中获取App.config中设置的内容. 想要通过 ConfigurationManager.AppSettings[key]; 来进行获取,已经添加 using System.Con ...

  9. JS---案例：移动元素，封装动画函数

    案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在styl ...

  10. GitHub 设置和取消代理，加速 git clone

    git 设置代理: git config --global git 取消代理: git config --global --unset http.proxy 针对 github.com 设置代理: g ...