之前在工作中，有位同事问过我一个问题，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. 使用if判断字符串的长度是否等于10，根据结果进行不同的输出

    string1=' print(len(string1)) # 使用len()计算字符串长度 if not len(string1) ==10: print('字符串的长度不为10') else: p ...

  2. windows10查看电脑已经保存的wifi密码

    1,打开windows的命令窗口,输入    netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...

  3. 张亦总结《AG百家乐庄闲，龙虎中下三路技巧和三株路的运用》

    ​​关于三珠路的各种打法,这里我做个详细的讲解 三珠路的打法源于澳门赌王叶汉,需要了解赌王叶汉的著作<BJL投注公式>的可以加我Q:<10353581>进行详细解答 叶汉的打法 ...

  4. Ubuntu Server 上在安装Nginx时执行./confgiure后提示：C compiler cc is not found

    场景 Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...

  5. java8新特性,你有用起来了吗？(精编)

      2019年9月19日java13已正式发布,感叹java社区强大,经久不衰.由于国内偏保守,新东西总要放一放,让其他人踩踩坑,等稳定了才会去用.并且企业目的还是赚钱,更不会因为一个新特性去重构代码 ...

  6. 一文解读Docker (转)

    最初的2小时,你会爱上Docker,对原理和使用流程有个最基本的理解,避免满世界无头苍蝇式找资料.本人反对暴风骤雨式多管齐下狂轰滥炸的学习方式,提倡迭代学习法,就是先知道怎么玩,有个感性认识,再深入学 ...

  7. 老版本nginx存在安全漏洞，不停服务热升级

    1.场景描述 安全部通知:nginx存在"整数溢出漏洞",经测试2017年4月21日之后的版本无问题,将openresty升级到最新版本,Nginx升级到1.13.2之后的版本. ...

  8. Oracle模糊查询CONCAT参数个数无效

    在使用MyBatis操作Oracle数据库的时候,写模糊查询突然发现原本在MySql中正确的代码,在Oracle中报错,参数个数无效 <if test="empId!=null and ...

  9. 搭建自己的企业级镜像仓库-Harbor

    网上资料很多,在这记录一下思路 1 安装Docker 2 安装Docker Compose apt-get install docker-compose3 下载最新版Harbor在线安装包,例如 ha ...

  10. OSG嵌入QT的简明总结

    目录 1.解决方案 2.存在问题 1) 警告提示 2) 多线程问题 3) 其他 1.解决方案 不得不说关于OSG的资料实在太零散了,搜索了很多关于OSG在QT下的解决方案,都是各有各的说法,有的说的不 ...