JS代码实现复制功能

一、实现原理

浏览器提供了copy命令,将选中内容复制到剪切板

document.exeCommand("Copy");


二、实例

select()方法只对<input>和<textarea>有效

所以,如果要对普通文本进行复制,再将文本内容复制给<input>或<textarea>,复制成功后将该标签隐藏,从而实现复制

<script type="text/javascript">

function copytxt() {

    var txt = document.getElementById("copy").innerText; //获取需要复制内容

    var Input = document.createElement("input"); //使用createElement()创建 input 元素   

    Input.value = txt; //将内容赋值给 input 的 value

    document.body.appendChild(Input); //添加 input 元素

    Input.select(); // 选择对象   

    document.execCommand("Copy"); // 执行浏览器复制命令

    Input.style.display = "none"; //隐藏 input 元素alert('复制成功');

}

</script>

<!-- 将onClick="copytxt()"时间添加到文本所在的DOM,可实现点击文字复制 -->

<div id="copy">12345678</div>

<!-- 本案例为点击按钮复制 -->

<input type="button" onClick="copytxt()" value="点击复制" />

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,098评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,933评论 2 17
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 926评论 0 0
  • 一. Java基础部分.................................................
    wy_sure阅读 3,854评论 0 11