js+html5实现复制文字按钮

<div>
<input type="text" name="guanfangaddress" id="guanfangaddress"/>
<span id="copyBT" >复制</span>
</div> <script type="text/javascript">
function copyArticle(event) {
const range = document.createRange();
range.selectNode(document.getElementById('guanfangaddress'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功!");
}
document.getElementById('copyBT').addEventListener('click', copyArticle, false);
</script>

h5的复制功能的更多相关文章

  1. 移动端h5实现复制功能

    首先遇到这个需求是就各种百度,但是发现基本都是用js实现,而且兼容性还非常不好. 但是在寻觅和尝试的过程中,发现只需要css代码也可以完全实现的,对需要复制内容的标签加上下面这几行代码就可以了. -w ...

  2. h5的复制功能的使用,Clipboard.js的使用,主要是在app里面使用

    app中使用,框架用的是vue.js 1.显示要下载这个Clipboard.js插件 package-lock.json里面 "clipboard-polyfill": { &qu ...

  3. H5页面长按复制功能实现

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 默认情况下禁止了长按复制功能,要此功能需 ...

  4. 手机端h5复制功能

    html: <a href="javascript:;" id="copyBtn" class="f-r tac" data-clip ...

  5. H5 页面 上使用js实现一键复制功能

    2.解决苹果手机浏览器 无法使用的问题  上面的方法在 iphone 手机 safari浏览器失效的问题 其实就是使用输入框先显示然后模拟选择复制在隐藏输入框

  6. 移动端h5页面的那些坑

    最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...

  7. H5开发APP考题和答案

    { "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...

  8. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  9. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

随机推荐

  1. bzoj1433 [ZJOI2009]假期的宿舍 最大流

    [ZJOI2009]假期的宿舍 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3429  Solved: 1459[Submit][Status][D ...

  2. mysql 查询死锁语句

    我们可以用下面三张表来查原因:        innodb_trx ## 当前运行的所有事务        innodb_locks ## 当前出现的锁        innodb_lock_wait ...

  3. form标签

    一 什么是form标签 <form> 标签用于为用户输入创建 HTML 表单. 表单用于向服务器传输数据. 二 属性 1 method method 属性规定如何发送表单数据(表单数据发送 ...

  4. hdu 1277 AC自动机

    全文检索 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. UVa11762 Race to 1

    期望DP 一个数只能分解成不大于它的数,那么转移构成拓扑关系. 试了一下预处理出不大于x的质数个数,然而程序并没有变快 /*by SilverN*/ #include<algorithm> ...

  6. sharpwebmail邮件管理系统开源 下载及使用方法

    原文发布时间为:2008-11-16 -- 来源于本人的百度文章 [由搬家工具导入] 网址:http://sourceforge.net/projects/sharpwebmail/ 点击后:点击do ...

  7. mybatis动态sql片段与分页,排序,传参的使用与一对多映射与resultMap使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  8. 什么是GOP(转)

    所谓GOP,意思是画面组,MPEG格中的帧序列,分为I.P.B三种,如排成IBBPBBPBBPBBPBBP...样式,这种连续的帧图片组合即为GOP(画面群,GROUP OF PICTURE),是MP ...

  9. HDU 5212 Code【莫比乌斯反演】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5212 题意: 给定序列,1≤i,j≤n,求gcd(a[i],a[j])∗(gcd(a[i],a[j] ...

  10. 牛客网 牛客练习赛7 D. 珂朵莉的无向图(多源BFS)

    题目链接  Problem D 比赛的时候完全想不到 直接对给定的这些点做多源$BFS$,把给定的这些点全都压到队列里,然后一个个做. 最后统计被访问的点的个数即可. #include <bit ...