js实现点击复制功能

最新推荐文章于 2024-03-19 09:03:37 发布
最新推荐文章于 2024-03-19 09:03:37 发布
阅读量5.1w 收藏 15
点赞数 1
分类专栏： javascript 前端效果

一、实现点击按钮，复制文本框中的的内容

<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好，可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

二、复制专题地址和 url 地址，传给 QQ/MSN 上的好友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js复制代码</title>
</head>
<body>
<p>
<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友">
<script language="javascript">
function copyToClipBoard(){
var clipBoardContent="";
clipBoardContent+=document.title;
clipBoardContent+="";
clipBoardContent+=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
}
</script>

三、直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

四、点击文本框时，复制文本框里面的内容

<input οnclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>

五、复制文本框或者隐藏域中的内容

<script language="javascript">
        function CopyUrl(target) {
            target.value = myimg.value;
            target.select();
            js = myimg.createTextRange();
            js.execCommand("Copy");
            alert("复制成功!");
        }
        function AddImg(target) {
            target.value = "[IMG]" + myimg.value + "[/ img]";
            target.select();
            js = target.createTextRange();
            js.execCommand("Copy");
            alert("复制成功!");
        }
    </script>

六、复制 span 标记中的内容

<script type="text/javascript">
        function copyText(obj) {
            var rng = document.body.createTextRange();
            
            rng.moveToElementText(obj);
            rng.scrollIntoView();
            rng.select();
            rng.execCommand("Copy");
            rng.collapse(false);
            alert("复制成功!");
        }
    </script>

七、浏览器兼容  copyToClipboard("拷贝内容")

<script>
        function copyToClipboard(txt) {
            if (window.clipboardData) {
                window.clipboardData.clearData();
                clipboardData.setData("Text", txt);
                alert("复制成功！");

            } else if (navigator.userAgent.indexOf("Opera") != -1) {
                window.location = txt;
            } else if (window.netscape) {
                try {
                    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
                } catch (e) {
                    alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
                }
                var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
                if (!clip)
                    return;
                var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
                if (!trans)
                    return;
                trans.addDataFlavor("text/unicode");
                var str = new Object();
                var len = new Object();
                var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
                var copytext = txt;
                str.data = copytext;
                trans.setTransferData("text/unicode", str, copytext.length * 2);
                var clipid = Components.interfaces.nsIClipboard;
                if (!clip)
                    return false;
                clip.setData(trans, null, clipid.kGlobalClipboard);
                alert("复制成功！");
            }
        }
    </script>

八、兼容各大浏览器的复制代码（结合ZeroClipboard.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script language="JavaScript">
        var clip = null;
        function $(id) { return document.getElementById(id); }
        function init() {
            clip = new ZeroClipboard.Client();
            clip.setHandCursor(true);
            clip.addEventListener('mouseOver', function (client) {
                // update the text on mouse over
                clip.setText($('fe_text').value);
            });

            clip.addEventListener('complete', function (client, text) {
                //debugstr("Copied text to clipboard: " + text );
                alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
            });
            clip.glue('clip_button', 'clip_container');
        }
    </script>
</head>
    
    <body onLoad="init()">
        <input id="fe_text" cols=50 rows=5 value=复制内容文本1>
        <span id="clip_container">
            <span id="clip_button">
                <b>复制</b>
            </span>
        </span>
    </body>
</html>


kongjiea
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS实现点击复制功能（ZeroClipboard）
05-19
JS实现点击复制功能
js如何实现复制功能
gardenia的博客
06-01 1万+
方法一： 用原生的document.execCommand(‘copy’)的方式实现，移动端（安卓，iOS兼容）和PC端都可以使用 方法二： 使用第三方框架clipboard的方式实现，移动端默认浏览器不兼容，PC端可以使用 PS：如有错误，请多指教~
js复制内容到剪贴板实现复制粘贴功能
最新发布
_江屿_
03-19 306
js复制内容到剪贴板实现复制粘贴功能
js实现复制功能
个人博客
04-12 1万+
js实现复制功能一、具体场景二、实现方式1. document.execCommand（1）具体实现（2）方法特点2.navigator.clipboard.writeText（1）具体实现（2）方法特点 一、具体场景 前端有时需要实现点击按钮复制的功能，这个时候就不能让用户去手动选择内容右键复制了。 二、实现方式 1. document.execCommand （1）具体实现 复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。这就需要借助输入框
JS实现复制粘贴的方式
一个女胖子的博客
03-24 2795
最近在项目中遇到了需要复制粘贴的功能，虽然是个简单的小功能，我竟然没做过，所以根据查找的资料还有实践在这里总结一下； JS实现复制粘贴方式： 原生通过document.execCommand(‘copy’)的方式实现 使用第三方框架clipboard的方式实现 IE大神 一、execCommand方式 document.execCommand(),文档对象的 execCommand方法允许运行命令来操纵可编辑区域的内容，具体可以查看这里。 只需要选中要复制的内容，执行document.execComm
js 复制文本的四种方式
weixin_55220248的博客
02-13 2603
js 复制文本的四种方式
谈谈JS中的拷贝Copy复制的方法（Javascript拷贝）
weixin_59923200的博客
09-22 6720
拷贝（Copy），都是基于引用类数据来说的，基本数据类型直接在Heap中直接拷贝一份，引用数据类型分为浅拷贝和深拷贝； 虽然现在有很多数据库，直接封装好了一部分代码，我们直接引用就可以，比如Lodash，它的代码封装比较完善，但是我们还是要简单了解下拷贝的知识； 浅拷贝：复制的是一个引用地址，如果地址内的内容发生改变，所有的内容都会改变； 深拷贝：在内存中开辟出一块地盘，存放复制过来的对象； 例子我就不写了，直接封装函数，然后调用就可以了，有浅拷贝和深拷贝的几种写法，如有错，请指正，...
JS实现各种复制到剪贴板
热门推荐
花蝴蝶的专栏
04-20 2万+
一、实现点击按钮，复制文本框中的的内容 function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); } 用户定义的代码区域
JavaScript实现点击复制（JS访问剪贴板相关）
weixin_45092437的博客
04-06 8802
document.execCommand()方法用来操作当前聚焦的可编辑元素（`input`、`textarea`）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。 Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand() 这种剪贴板访问方式的。
js如何实现复制页面内容的三种方法
weixin_51188380的博客
01-05 2844
【代码】js如何实现复制页面内容的三种方法。
JS复制粘贴功能实现
qq_44886882的博客
06-21 4522
本章记录如何通过js代码实现复制内容到剪切板，之后可以粘贴到需要的地方的功能。
JS实现复制功能
10-20
本文主要介绍了JS实现复制功能的实例，具有很好的参考价值，下面跟着小编一起来看下吧
js实现点击按钮复制文本功能
10-18
主要为大家详细介绍了原生js实现点击按钮复制文本的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 点击触发复制功能实例详解
12-02
js调用复制功能使用: document.execCommand("copy"， false);  document.execCommand()方法功能很强大，了解更多请戳：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 正文： 调用以上...
js实现复制功能(多种方法集合)
11-29
1.实现点击按钮，复制文本框中的的内容 [removed] function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert&#...
javaScript复制功能调用实现方案
10-27
说到使用js实现点击复制的功能，我下面想说的方法也是和网上的大同小异的。js实现是很简单，最难的是兼容问题，毕竟用IE以外的人还是有很多的
JavaScript实现点击按钮就复制当前网址
10-23
在大量的网站都有这样的功能，当点击一个按钮的时候可以复制当前页面的地址，以此可以方便网站用户对链接的存储，同时也便于网站的推广，下面给大家分享具体实现代码，对js实现点击按钮就复制的相关知识感兴趣的朋友...
js实现点击后将文字或图片复制到剪贴板的方法
10-25
主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下
用 javascript 实现的点击复制代码
12-01
最常用的代码，不需要多浏览器都兼容，但代码比较简洁，也不用很多的js与flash function ...如果你需要这个兼容多浏览器的js复制代码功能可以参考这篇文章： //www.jb51.net/article/76769.htm <titl
js实现点击按钮复制功能
06-08
可以使用 Clipboard API 来实现点击按钮复制功能。以下是一个简单的实现示例： HTML 代码： ```html <button id="copy-btn" data-clipboard-text="要复制的内容">复制</button> ``` JavaScript 代码： ```javascript // 引入 ClipboardJS 库 import ClipboardJS from 'clipboard'; // 初始化 ClipboardJS new ClipboardJS('#copy-btn'); ``` 当用户点击按钮时，`data-clipboard-text` 属性中的内容将被复制到剪贴板中。你也可以使用 JavaScript 动态设置 `data-clipboard-text` 属性的值，以达到动态复制的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值