当前位置:首页 > 源码分享 > 技术教程 > 正文内容

如何用JS代码制作网页复制功能

zjsn3个月前 (11-01)技术教程145

利用JS脚本来实现点击某个按钮或某段文字来复制相应的内容,网上提供了很多种方法,比如接管浏览器的复制功能,使用一些js复制插件等等,下面博文提供一个很多的js方法,几行代码的就能实现。


js实现点击复制的功能

先用js定义一个复制功能的函数,在复制触发时调用即可!

/**
 * @name 自定义的JS复制函数
 * @param text 被复制的内容
 * 
 * @host 73so.com
 */
function copyText(text) 
{
    var tag = document.createElement('input');
    tag.setAttribute('id', 'copy_input');
    tag.value = text;
    document.getElementsByTagName('body')[0].appendChild(tag);
    document.getElementById('copy_input').select();
    document.execCommand('copy');
    document.getElementById('copy_input').remove();
}


例1:


js点击按钮,复制指定的内容。

<button onclick="copyText('73so')">点击我复制邀请码</button>

注:copyText 为上面自定义的复制函数,直接把想要复制的内容以参数的形式提交给函数即可!


例2:


js点击按钮复制某个DIV内的文字


<button id="but">点击我复制邀请码</button>
<div id="cent">我是被复制的内容!</div>
<script>
document.getElementById('but').onclick = function () {
    var txt = document.getElementById('cent').innerText;
    copyText(txt);
    // copyText 为上面自定义的函数
}
</script>

PS:上面只是简单的举了两个复制函数使用的例子,你可以在多个场景下使用这个复制的函数,只要能获取到被复制的内容,并将复制的内容传入到 copyText() 函数中即可!

js.jpg


版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。

本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系

本文链接:https://www.zjsn.net/?id=32

分享给朋友:

“如何用JS代码制作网页复制功能” 的相关文章

给网站侧边栏如何加上美女视频联播模块

给网站侧边栏如何加上美女视频联播模块

打开本站首页,有没发现右下角有个美女视频呢,哈哈,今天给大家分享下如何在网站上加美女视频。一个非常实用的侧边模块,可以自己在网站建一个侧边栏模块,粘贴下面代码进入保存,一般就可以了。不想看了点击下视频暂停,就不会继续了。<div>     <...

QQ/微信提示已停止访问该网页如何解除

QQ/微信提示已停止访问该网页如何解除

许多站长都有过域名在qq或者微信爆红的经历把今天指尖十年教你们一个解除域名的方法教程开始1.首先随便找个单页源码挂到网站上面,让别人一打开就知道你这个网站是个单页2.把你爆红的域名绑定上去(@和*都要解析)3.然后将域名放置三天不要动4.一个星期之后访问这个地址提交申诉,第二天就能解除了https:...

 pbootcms多语言建站常见问题(转载)

pbootcms多语言建站常见问题(转载)

一、如何搭建多语言站?多语言/区域建站用于使用同一个后台建立多语言网站。1、使用步骤1)在后台”系统管理>数据区域”添加相应的区域,具体参考默认区域;2)将多语言的模板放入模板目录,不同语言的模板均放在template目录下;3)在后台选择语言切换到不同语言,分别设置:站点信息(注意选择模板)...

http和https带www不带www四个网址如何统一为一个

http和https带www不带www四个网址如何统一为一个

很早以前,站长做网站只需要http访问即可,这几年随着企业和用户对安全问题的重视,许多网站都已改为https加密访问。随之也可能出现这种情况,同一个页面内容,可以有四个不同的网站,分别是http访问,https访问,带www访问,不带www访问,作为一个SEOer,页面统一入口也成为一个不大不小的问...

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

许多站长关注自己网站的百度收录情况,可能有人和我一样每天要site:www.zjsn.net 好几次。有的人会问,为什么别人网站百度收录到的页面带缩略图,而自己的网站没带缩略图呢,如何才让自己网站也在百度内带上缩略图?就这个问题,本人做下解释什么样的网站百度收录带缩略图?通常是网站建立时间...

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

本人电脑以前是win10系统21H1版本,已经手动关闭了系统自带所有广告提示,今天电脑自动升级到了22H2版本,居然在使用本地搜索功能时出现一个热门搜索栏。里面显示乱七八糟的推荐内容,一旦点击,就会跳转到Edge浏览器中Bing搜索结果页面。作为一个精神洁癖和强迫症双重患者,怎堪忍受如此行径。在系统...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。