时间:2021-05-26
WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方。
HTML
首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载。
接着我们在页面中的body部分加入如下代码:
页面中放置了一个输入框textarea,当然也可以是其他html元素,然后就是一个复制按钮,也可以是链接文本形式。
Javascript
当点击“复制内容”时,调用zclip插件,并提示复制成功,请看代码:
值得注意的是如果是复制的内容来自输入框input、textarea等,copy对象使用:
如果是复制的内容来自页面元素div、p之类的,copy对象使用:
copy: $('#mytext').text();
这样就完成了复制内容到剪贴板的功能。
参数说明
path:swf调用路径,必须,如js/ZeroClipboard.swf,ZeroClipboard.swf文件已存在下载包中。
copy:复制的内容,必须,任意字符串,也可以是回调函数返回的内容
beforeCopy:复制内容前回调函数,可选
afterCopy:复制内容后回调函数,可选
以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Fla
若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏
如何判断PC端浏览器内核XML/HTMLCode复制内容到剪贴板browser={/***@property{boolean}ie检测当前浏览器是否为IE*/i
兼容浏览器的inline-block,为什么要这么写是因为有些老的浏览器对inline-block并不支持,那么就需要这么写了CSSCode复制内容到剪贴板.i
参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。以下是成果,兼容主流浏览器,包括ie6。CSSCode复制内容到剪贴板*{margin: