js 实现复制粘贴功能

<!DOCTYPE html>
<!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> -->
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>ZeroClipboard(复制功能)</title>
</head>
<body>
	<label for="cardid">卡号:</label>
	<input type="text" name="cardid" id="cardid" value="123456789" readonly="readonly" />
	<button id="copycardid">点击复制卡号</button>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
$(function(){
	init();
});
function init() {
	// ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
	var clip = new ZeroClipboard.Client(); // 新建一个对象
	clip.setHandCursor( true );
	clip.setText($(‘#cardid‘).val()); // 设置要复制的文本。
	clip.addEventListener( "mouseUp", function(client) {
		alert("复制卡号成功!");
	});
	// 注册一个 button,参数为 id。点击这个 button 就会复制。
	//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
	clip.glue("copycardid"); // 和上一句位置不可调换
}
</script>

需要引入 ZeroClipboard.js 和 ZeroClipboard.swf,同时网站处于发布状态或者在本地有搭建好的服务器,单纯的运行页面是无法使用的。

时间: 2024-07-30 10:52:44

js 实现复制粘贴功能的相关文章

通过如何通过js实现复制粘贴功能

在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>clipboard</title> <SCRIPT language=JavaS

使用JS实现复制粘贴功能

如果嵌套太多使用这个: // 複製單號1 // 第一步把這個放到頁面 // <div style="position:absolute; opacity: 0;" id="copy1"></div> // 第二步增加按鈕設置點擊事件 // 第三如下: copyNo() { const a = document.createElement('textarea') let b; if (this.myshow) { a.innerText = t

仿复制粘贴功能,长按弹出tips的实现

方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列] 方案三:通过hierarchyviewer.bat查看可知,Editor的复制粘贴功能用的是toolbar,利用此功能也可实现[可行,代码量大] 方案四:通过查看Editor源码分析可知,只需要实现ActionMode.CallBack2接口,setMode即可实现[可行,简单实现接口,再添加少

在CMD命令行和PowerShell中实现复制粘贴功能

在CMD命令行和PowerShell中实现复制粘贴功能 经常使用命令行或者PowerShell的朋友肯定会遇到这种情况:粘贴文本很简单,右键--选择粘贴即可,但是想要复制命令行或者PowerShell中的命令,倒是不知道怎么办了.其实只需要更改其属性. PS:PowerShell是基于任务的命令行外壳,这里和CMD命令行设置一样. 左键点击CMD处理程序左上角,选择属性.(或者按下Alt+空格). 选中快速编辑模式,点击确定. 这时,我们可以选择命令行中的文本了. 在新命令行中双击右键,即可实现

通过file读写功能实现文件复制粘贴功能

通过file读写功能实现文件复制粘贴功能 import java.io.*; public class Copy1M { public static void main(String arg[]) throws FileNotFoundException{ long begin = System.currentTimeMillis(); //记录程序开始事件 //**************************************获取文件属性***********************

[JavaScript] 怎么使用JS禁止复制粘贴

1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body> 禁止选取.防止复制 3. 禁止粘贴 4. 禁止复制和剪切5. <input style="ime-mode:disabled"> 关闭输入法 [

demo:复制粘贴功能

复制链接功能,也是为了方便用户一键"复制",粘贴链接和文本到指定位置,在此,接着上一篇"demo:生成专属二维码link "来记录一键"复制"的实现. 相关插件 <!--布局: 按钮 输入框--> <a href="###" class="copylinkbtn" data-clipboard-target="#myLink">复制链接</a> <

Eclipse/MyEclipse中使用复制粘贴功能卡的解决办法

最近在MyEclipse中编辑代码时,使用快捷键进行复制粘贴,经常会导致编辑器短暂的停顿,光标不跟随,居然反应不过来,几近假死. 想来想去应该是编辑上的什么配置或者是IDE的什么功能导致,于是进入Preferences查找edit功能,进行一个个的测试,最后发现原来是代码的超链功能导致. 进入方法:Window -> Preferences -> General -> Editors -> Text Editors -> Hyperlinking 把超链的快捷键改为其他键比如

js 实现复制粘贴文本过滤(保留文字和图片)

实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <base href=""/> <style type="text/css"> </style> <