本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下
创新互联公司成立于2013年,我们提供高端重庆网站建设、成都网站制作、成都网站设计、网站定制、全网整合营销推广、微信平台小程序开发、微信公众号开发、网站推广服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为边坡防护网企业提供源源不断的流量和订单咨询。
图片展示:
注意css中的样式,有些页面复制不成功就是没有添加那一句造成的。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ -webkit-user-select: auto; } </style> <body> <span id="content"> 你好,好久不见! </span> <button id="copyBT">复制</button> <script> function copyArticle(event) { const range = document.createRange(); range.selectNode(document.getElementById('content')); 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> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站名称:js+html5实现复制文字按钮
标题来源:https://www.cdcxhl.com/article10/isggdo.html
成都网站建设公司_创新互联,为您提供网站排名、App设计、定制开发、用户体验、企业建站、关键词优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联