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

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

zjsn1年前 (2022-11-01)技术教程768

利用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代码制作网页复制功能” 的相关文章

让网页实现自动跳转的6种方法

让网页实现自动跳转的6种方法

网站站长有时需要某个网页自动跳转,如何实现呢,在这里分享下办法:第一种网页自动跳转方法:meta refresh自动跳转法在网页的head区域的meta refresh标签中,加入自动跳转代码,可实现网页的立即或延时自动跳转。 示例如下: <meta http-equiv="...

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

以下为PbootCMS网站模板可用标签收集整理大全,免费分享1、公司信息标签适用范围:全站任意地方均可使用。标签作用:用于调取网站与公司相关的信息,对应后台的“基础内容>公司信息”。{pboot:companyname}公司名称{pboot:companyaddress}公司地址{pboot:...

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

网上流传的安卓微信清理内置浏览器缓存方法已失效,因为微信内置浏览器据说不再是X5内核,改为使用xweb内核下面几个X5内核清理缓存网址也失效了。https://debugx5.qq.com http://debugtbs.qq.com debugmm.qq.com/?forcex5=true因为...

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

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

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

西京同城导航网站改版修改文件备注

西京同城导航网站改版修改文件备注

以下为本人修改西京同城导航站记录备份,以防万一忘记修改的地方2022.11.22(1)手机端隐藏首页点图大图(2)手机端侧边栏点图自适应宽度(3)申请收录页面一行填写两项改为一项2022.11.23(4)增加首页侧边栏分类显示(5)修改点出图片系统自适应浏览器宽度(6)修改手机端下方单链友链一行显示...

人物去世网站颜色如何变灰,全站变灰代码分享

人物去世网站颜色如何变灰,全站变灰代码分享

每逢哀悼大人物去世或者一些悲伤节日,站长可能需要把网站颜色设置为灰色,今天分享下适用任何网站内的变灰代码,注意,这个代码最好是放在CSS最后面位置,以防样式被覆盖。不需要的时候去掉代码即可。<style> html { /* //以下代码通过滤镜将页面中所有的彩色...

发表评论

访客

看不清,换一张

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