JavaScript实现复制功能函数

最新推荐文章于 2024-05-02 18:12:22 发布

大佩梨

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量102

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44161385/article/details/134950353

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

function copyUrl() {
  var copyText = document.getElementById("url");
  copyText.select();
  document.execCommand("copy");
}

其中，copyUrl()函数用于复制，document.getElementById(“url”)用于获取链接的DOM元素，select()方法用于选中文本，execCommand(“copy”)方法用于执行复制操作。

你可以在HTML中添加一个按钮，并在按钮上绑定copyUrl()函数，以便在用户点击按钮时调用该函数。

优惠劵

大佩梨

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现复制功能函数

js实现复制功能
复制链接

扫一扫

专栏目录

JavaScript 复制功能代码兼容多浏览器（ZeroClipboard）

02-26

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件：ZeroClipboard.js 如下代码： [removed][removed] 注意：以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径，可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址 Zero Clipboard实现简单跨浏览器复制 var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button，参数为 id。点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。 clip.glue("copy-botton"); // 和上一句位置不可调换这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。 Zero Clipboard的高级功能 1、reposition() 方法因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。不要紧，Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置： $(window).resize(function(){ clip.reposition(); }); 2、hide() 和 show() 方法这两个方法可以隐藏和显示 Flash 按钮。其中 show() 方法会调用 reposition() 方法。 3、setCSSEffects() 方法当鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如： #copy-botton:hover{border-color:#FF6633;}// 可以改成下面的 ":hover" 改成 ".hover" #copy-botton.hover{border-color:#FF6633;} 我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。 4、getHTML() 方法如果你想自己实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如： var html = clip.getHTML( 150, 20 ); 你可以用 innerHTML 或直接 [removed](); 进行输出。以下是测试输出的组装完毕的HTML 代码： <embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" /> IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。 Zero Clipboard 事件处理 Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。 clip.addEventListener( "load", function(client) { alert("Flash 加载完毕！"); }); Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。还有 “load” 也可以写成 “onLoad”，其他的事件也可以这样。其他事件还包括： mouseOver 鼠标移上事件 mouseOut 鼠标移出事件 mouseDown 鼠标按下事件 mouseUp 鼠标松开事件 complete 复制成功事件其中 mouseOver 事件和 complete 事件比较常用。前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。 clip.addEventListener( "mouseOver", function(client) { var test = document.getElementById("test"); client.setText( test.value ); // 重新设置要复制的值 }); //复制成功： clip.addEventListener( "complete", function(){ alert("复制成功！"); });

funk-lib:FP for Vanilla JavaScript

05-28

放克库 FP for Vanilla JavaScript funk-lib是用于使用本机JavaScript类型进行全栈功能编程的标准库。它受到启发，但并不打算复制Ramda的功能。为了规范化和同构，核心Browser和Node.js API有一些重叠。特征纯功能大多是。有一些记录在案的例外咖喱所有函数都经过，并且参数按“数据末尾”排列，以实现有用的部分应用同构两种包装均可用 Node.js （CommonJS） Browser （ES模块）广阔的包括300多种功能，可用于异步（承诺）可迭代（同步和异步）类型检查数组和对象标量（字符串，数字）功能组成网址 ... 和更多有关功能的完整列表，请参见的安装 npm i -P funk-lib # or: es-module compatible build npm i -P funk-l

参与评论您还未登录，请先登录后发表或查看评论

程序天下:JavaScript实例自学手册

07-08

第1章页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结第 2章按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件第3章字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器第4章鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效第5章层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容第6章下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序

在PHP中实现Javascript的escape()函数代码

12-18

这里，一般都需要预先将正常的字符串编码成 JavaScript unescape() 函数能够解译的格式，以 PHP 为例，可以使用以下函数实现 Javascript 中 escape() 函数相同的功能：复制代码代码如下: <?php function escapeToHex($string, $encoding = UTF-8) { $return = ; for ($x = 0; $x < mb_strlen($string, $encoding); $x ++) { $str = mb_substr($string, $x, 1, $encoding); if (strlen($s

assignplus:一个自定义的类似于Object.assign的函数，可以用符号注释覆盖以实现高级功能

05-23

AssignPlus assignPlus是一个assignPlus Object.assign的自定义函数，可以用符号注释覆盖以实现高级功能。有了它，您不仅可以做Object.assign可以做的事情，可以将对象的第一级可枚举的自身属性复制到另一个对象，还可以逐个对象地或递归地合并属性对象，并在其上完全定义属性目标，或完全删除属性。全部带有定义分配行为的符号注释。这被编写为ES2015模块，并在安装NPM时与Babel进行了编译。用法 assignPlus(target, source) 源对象属性将分配给目标对象。没有注释，其行为就像Object.assign 。无效的行为注释将被忽略。行为：默认在没有任何注释的情况下，默认情况下，源子对象的属性仅复制到目标上的等效属性。嵌套在默认对象内的子对象将不会进行注释检查！ merge 将所有可枚举的自

JavaScript：实现复制粘贴剪切功能

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交