之前在工作中，有位同事问过我一个问题，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. Vue如何实现数据响应的

    参考博客:https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d 翻译博客: ...

  2. 【NodeJS】跨域

    [NodeJS]跨域 转载:https://www.cnblogs.com/yangchongxing/p/10635480.html var express = require('express') ...

  3. Java集合类框架的最佳实践？

    根据应用的需要选择合适的集合对性能是非常重要的.如果一个集合的元素数量是固定的,而且我们能够提前知道固定的数量,那么就可以使用数组,而不是ArrayList. 每个集合都可以设置初始容量,如果我们提前 ...

  4. 更新Preloader与uboot

    1.用bsp-editor 产生Preloader 参考https://rocketboards.org/foswiki/Documentation/AVGSRD160Preloader 根据QSYS ...

  5. 建议2:注意Javascript数据类型的特殊性---(3)正确检测数据类型

    使用typeof预算符返回一个用于识别其运算数类型的字符串.对于任何变量来说,使用typeof预算符总是以字符串的形式返回一下6种类型之一 number string boolean object f ...

  6. CCF-CSP题解 201812-4 数据中心

    题目要求最长边最小的生成树.好吧,这就是一道kruskal MST题. #include <bits/stdc++.h> const int maxn = 50000; const int ...

  7. php调用新浪API生成t.cn短网址链接

    新浪提供了长链接转为短链接的API,可以把长链接转为 t.cn/xxx 这种格式的短链接. API: http://api.t.sina.com.cn/short_url/shorten.json ( ...

  8. LeetCode刷题总结-二分查找和贪心法篇

    本文介绍LeetCode上有关二分查找和贪心法的算法题,推荐刷题总数为16道.具体考点归纳如下: 一.二分查找 1.数学问题 题号:29. 两数相除,难度中等 题号:668. 乘法表中第k小的数,难度 ...

  9. 千呼万唤始出来——uFUN开发板2.0开箱评测

    前言 今年3月,我参与了面包板社区组织的第一批uFUN开发板评测活动,并有幸能获得试用机会,那是我第一次了解到uFUN这个项目及背后的故事,4月份,uFUN 2.0版本来了,收到了张工送的一块样板,后 ...

  10. 一种分片更新ubi卷的方式(基于ubiupdatevol，拓展fifo支持）

    ubi卷的更新方式 对于ubi卷,不能像普通块设备一样进行随机读写.每次更新需要从头写入. 具体的,需要在打开对应的设备之后,先执行一个ioctl UBI_IOCVOLUP,同时传入要更新的数据大小. ...