一、原理分析

浏览器提供了 copy 命令 ,可以复制选中的内容

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使

最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉

点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容

二、代码实现

HTML 部分

<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style> <div class="wrapper">
<p id="text">我把你当兄弟你却想着复制我?</p>
<textarea id="input">这是幕后黑手</textarea>
<button onclick="copyText()">copy</button>
</div>

JS 部分

  <script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
</script>

JS 点击复制的更多相关文章

  1. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  2. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  3. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  4. JS点击复制

    <!DOCTYPE html><html><head> <script type="text/javascript"> functi ...

  5. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  6. JS 点击复制Copy插件--Zero Clipboard

    写博客就是一周工作中遇到哪些问题,一个优点就是能够进行一个总结,另外一个优点就是下次遇到相同的问题即使那你记不住,也能够翻看你的博客攻克了.相同也能够帮到别人遇到与你一样问题的人.或者别人有比你更好的 ...

  7. js点击复制剪贴板

    代码用原生写的.工作中用的angular,所以如果有用angular的话,请把js代码copyToClipboard函数中的document.getElementById(elementId).inn ...

  8. js 点击复制文字

    复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...

  9. js 点击复制代码 window.clipboardData.setData

    var v = document.getElementById("forcopy").value; window.clipboardData.setData('text',v); ...

随机推荐

  1. 给<input type="color">设置默认值

    参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...

  2. IDEA复制某个类的包名路径

    在对应的类中右键: 然后看图:

  3. windows图形图像桌面消失(误删.net组件)

    核心模式core 变回完整模式 Full,用dism命令,具体命令如下 dism /online /enable-feature /all /featurename:servercore-fullse ...

  4. 【转】 ISP概述、工作原理及架构

    1.概述 ISP全称Image Signal Processing,即图像信号处理.主要用来对前端图像传感器输出信号处理的单元,以匹配不同厂商的图象传感器. ISP 通过一系列数字图像处理算法完成对数 ...

  5. Python自学:第三章 使用列表中的各个值

    bicycles = ['trek','cannondale','redline','specialized'] message = "My first bicycle was a &quo ...

  6. linux存储管理之磁盘阵列

    磁盘阵列 RAID ====================================================================================RAID:廉 ...

  7. day052-53 django框架

    一.MVC和MTV模型 这就是web开发中的一种思维模式或者说一套理念,MTV也是基于MVC发展出来的,本质相同,都是使各组件保持松耦合 MVC  把web应用分为模型(model),控制器(cont ...

  8. selenium java 文件上传、下载

    1.webdriver对页面文件的下载 我们一般操作浏览器下载时会让我们选择下载的目录然后经过一系列操作后才进行文件下载操作,但是用webdriver不能按这样的方式操作.经过查询资料找到了如下的实现 ...

  9. TCP建立连接为什么是三次握手,为什么不是两次或四次?

    什么是三次握手 学过网络编程的人,应该都知道TCP建立连接的三次握手,下面简单描述一下这个过程. 如图所示 第一次握手:客户端发送TCP包,置SYN标志位为1,将初始序号X,保存在包头的序列号(Seq ...

  10. 记不住的Android活动的生命周期

    Activity基类定义了管理一个互动的生命周期的一系列事件. Activity生命周期的一系列事件onCreate()——当前活动首次被创建时使用.onStart()——当前活动对用户可见时调用.o ...