一、原理分析

浏览器提供了 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. MapReduce 踩坑 - hadoop No FileSystem for scheme: file/hdfs

    一.场景 hadoop-3.0.2 + hbase-2.0.0 一个mapreduce任务,在IDEA下本地提交到hadoop集群可以正常运行. 现在需要将IDEA本地项目通过maven打成jar包, ...

  2. 短路运算符(逻辑与&& 和 逻辑或||)

    首先我们来解释一下短路运算符: 短路运算符就是从左到右的运算中前者满足要求,就不再执行后者了: 可以理解为: &&为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执 ...

  3. Spring中的@Async

    在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3.x之后, ...

  4. webpack.optimize.UglifyJsPlugin配置说明

    https://segmentfault.com/a/1190000008995453?utm_source=tuicool&utm_medium=referral

  5. ES6与ES5对比 模板字符串

    var title = '你好' ES5 var tpl1 = '<div>' + '<span>' + title + '</span>' '</div&g ...

  6. 周鸿祎IOT发布会思考

    周鸿祎的IOT发布会提出了一个新的东西,就是一个智能家居的应用场景,但是与传统的智能家居的应用场景不同,周鸿祎的智能家居概念添加了一个关键的边缘计算节点,这个节点置于家庭端,旨在提高家庭端的计算能力, ...

  7. querySelector() 方法

    返回文档中匹配指定 CSS 选择器的一个元素. 虽然IE8中没有getElementsByClassName()但可以用querySelector()代替 注意: querySelector() 方法 ...

  8. 7.3 GRASP原则三: 低耦合 Low Coupling

    3.GRASP原则三: 低耦合 Low Coupling  How to support low dependency, low change impact and increased reuse? ...

  9. SAP WDA 自建Portal

    1.新建Package:ZWDA. 2.新建Portal用户表:ZPORTAL_USER 上图中是基于CRM的BP来做的用户表,如果针对其他系统可以使用组织架构里的角色用户... 3.新建用户视图配置 ...

  10. sql 同一个字段在查询结果中出现两次

    SELECT GET .daytime,    GET.data AS GET,    xh.data AS xh FROM    ( SELECT daytime, SUM ( get_sum ) ...