之前在工作中，有位同事问过我一个问题，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. 【Ubuntu 16.04.2_64】系统配置

    Ubuntu 16.04.2_64系统配置 转载:http://www.cnblogs.com/yangchongxing/p/9049897.html Ubuntu Server服务指南:https ...

  2. java8新特性 - 什么是函数式接口 @FunctionalInterface？

    什么是函数式接口 @FunctionalInterface 源码定义 /** * An informative annotation type used to indicate that an int ...

  3. spring源码学习（四）-spring生命周期用到的后置处理器

    生命周期的九大后置处理器 第一次调用后置处理器org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory# ...

  4. 简单实现vue列表点击某个高亮显示

    比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...

  5. day 28-1 元类

    元类 元类的用途:自定义元类控制类的创建行为及类的实例化行为 Python 中一切皆为对象. 一切接对象,对象可以怎么用呢? 1.都可以被引用,x=obj 2.都可以当作函数的参数传入 3.都可以当作 ...

  6. Android 项目优化（七）：阿里巴巴Android开发手册整理总结

    本来之前觉得Android项目优化系列的文章基本整理完毕了,但是近期看了一下<阿里Android开发手册>有了很多收获,想再整理一篇,下面就开始吧. 先在这里列一下之前整理的文章及链接: ...

  7. 自定义Metadata验证属性

    一.定义 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...

  8. python-基础r/R、b、u/U含义

    1.r/R,代表非转义的原始字符串,一般使用在正则表达式和win目录上 2.b“” 代表b后面的内容为bytes类型 3.u/U 表示对字符串进行unicode编码,一般使用在有中午的地方,防止乱码.

  9. default(T);

    在泛型类型中,由于泛型类型即可以是引用类型也可以是值类型,所以不能用null来表示默认值.这里通过default来进行.引用类型的default将泛型类型初始化null,值类型的default将泛型类 ...

  10. 使用hexo、github Pages搭建博客

    1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...