Javascript实现复制动作的几种方法(总结)

本篇文章给大家介绍一下javascript 实现复制(copy)动作的几种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Javascript实现复制动作的几种方法(总结)

Javascript 实现复制(Copy)动作大全

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

function copyUrl2(){    var Url2=document.getElementById("biao1");    Url2.select(); // 选择对象    document.execCommand("Copy"); // 执行浏览器复制命令    alert("已复制好,可贴粘。");} 

登录后复制

 原理:点击按钮的时候触发copyUrl2函数,根据biao1 ID选中对象,然后在根据execCommand复制选中内容,所以此时选择的内容必须是可视的,也就是说不能是隐藏的文本域。

立即学习“Java免费学习笔记(深入)”;

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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Js复制代码

function copyToClipBoard(){var clipBoardContent="";clipBoardContent+=document.title;clipBoardContent+="";clipBoardContent+=this.location.href;window.clipboardData.setData("Text",clipBoardContent);alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");}

登录后复制

三、直接复制 url

 function copyUrl(){    var clipBoardContent=this.location.href;    window.clipboardData.setData("Text",clipBoardContent);    alert("复制成功!");}

登录后复制

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

function oCopy(obj){    obj.select();    js=obj.createTextRange();    js.execCommand("Copy")    alert("复制成功!");}

登录后复制

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

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("复制成功!");}

登录后复制

六、复制 span 标记中的内容

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

登录后复制

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

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("被浏览器拒绝!请在浏览器地址栏输入'about:config'并回车然后将 '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("复制成功!");      }    }

登录后复制

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

Zero Clipboard Test 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' ); }复制

登录后复制

更多编程相关知识,请访问:编程入门!!

以上就是Javascript实现复制动作的几种方法(总结)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2718655.html

(0)
上一篇 2025年3月7日 22:17:43
下一篇 2025年3月6日 03:32:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详解JavaScript降低函数复杂度的方法

    JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。 在本文中,我们将研究如何降低函数复杂度。 将重复的代码移到同个位置 我们应该将重复的代码提取出…

    2025年3月7日
    200
  • 怎么遍历DOM

    相关推荐:《javascript视频教程》 我们知道可以使用document对象的内置方法通过ID,类,标签名和查询选择器来访问HTML元素。 DOM 是由节点树构成的,document 节点位于根,其他每个节点(包括元素,注释和文本节点)…

    2025年3月7日
    200
  • 实现原生js实现轮播图

    免费学习推荐:javascript视频教程 使用原生js实现轮播图 今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正。静态效果图如下: 核心思想 将一些图片在一行中平铺,然后计算偏移量再利用定…

    2025年3月7日 编程技术
    200
  • 记录JavaScript的学习笔记

    免费学习推荐:javascript学习教程 一、什么是JavaScript 1-1、JavaScript实现 虽然JavaScript和ECMAScript基本上是同义词,但JavaScript远不限于ECMA-262所定义的那样。完整的J…

    2025年3月7日
    200
  • DOM节点和元素之间有什么区别

    相关推荐:《javascript视频教程》 文档对象模型(DOM)是一个将HTML或XML文档视为树形结构的接口,其中每个节点都是文档的一个对象。DOM还提供了一组方法来查询树、改变结构、样式。 DOM 还使用术语元素(Element)它与…

    2025年3月7日
    200
  • JavaScript实现UTF-8编解码

    免费学习推荐:javascript视频教程 首先简单介绍一下UTF-8。UTF-8以字节为单位对Unicode进行编码。UTF-8的特点是对不同范围的字符使用不同长度的编码。对于0x00-0x7F之间的字符,UTF-8编码与ASCII编码完…

    2025年3月7日
    200
  • 实现js的双线性插值和双三次插值法

    免费学习推荐:js视频教程 介绍双线性插值原理双三次插值法原理js实现 介绍 在网页中利用canvas进行绘图时,遇到一个问题,原始的数据分辨率很小,而图片要放大到整个网页,所以需要把数据进行插值放大。学习了双线性插值和三次内插法插值,两种…

    2025年3月7日 编程技术
    200
  • js基本数据类型有哪些

    js基本数据类型有:1、常用的基本数据类型包括undefined、null、number、boolean、string;2、引用数据类型也就是对象类型,比如Object、array、function、data等。 本文操作环境:宏基s40-…

    编程技术 2025年3月7日
    200
  • vue和javascript的区别是什么

    vue和javascript的区别:1、javaScript是运行在浏览器端的脚本语言,而Vue.js可以作为一个js库来使用,是一套构建用户界面的渐进式JavaScript框架;2、js要获取到DOM对象,而Vue是值和js对象进行绑定。…

    编程技术 2025年3月7日
    200
  • JavaScript介绍AJAX加载单张图片展示进度的方法

    免费学习推荐:js视频教程 用手机上网,经常看到加载进度条,尤其是加载图片的。 做过多张图片的加载进度,但是对于单张图片,特别是图片比较大的时候,需要进度条告诉用户加载进度,且可以提高用户体验。 传统的加载肯定不行,需要用到 AJAX 加载…

    2025年3月7日
    200

发表回复

登录后才能评论