103_剪贴板事件

最新推荐文章于 2024-02-02 07:00:00 发布
最新推荐文章于 2024-02-02 07:00:00 发布
阅读量638 收藏
点赞数
分类专栏： JavaScript学习 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/121211351
版权

1. oncopy事件

1.1. oncopy事件在用户拷贝元素上的内容时触发。

1.2. oncopy事件通常用于type="text"的<input>元素。

1.3. 有三种方式可以拷贝元素和内容:

1.3.1. 按下ctrl + c。

1.3.2. 在你的浏览器的Edit(编辑)菜单中选择"Copy(复制)"。

1.3.3. 右键鼠标按钮, 在上下文菜单中选择"Copy(复制)"命令。

1.4. 语法

1.4.1. html中:

<element oncopy="myScript">

1.4.2. JavaScript中:

object.oncopy=function(){myScript};

2. onpaste事件

2.1. onpaste事件在用户向元素中粘贴文本时触发。

2.2. 虽然使用的html元素都支持onpaste事件, 但实际上并非支持所有元素, 例如<p>元素, 除非设置了contenteditable为"true"。

2.3. onpaste事件通常用于type="text"的<input>元素。

2.4. 有三种方式可以粘贴元素和内容:

2.4.1. 按下ctrl + v。

2.4.2. 在你的浏览器的Edit(编辑)菜单中选择"Paste(粘贴)"。

2.4.3. 右键鼠标按钮, 在上下文菜单中选择"Paste(粘贴)"命令。

2.5. 语法

2.5.1. html中:

<element onpaste="myScript">

2.5.2. JavaScript中:

object.onpaste=function(){myScript};

3. oncut事件

3.1. oncut事件在用户剪切元素的内容时触发。

3.2. 虽然使用的html元素都支持oncut事件, 但实际上并非支持所有元素, 例如<p>元素, 除非设置了contenteditable为"true"。

3.3. oncut事件通常用于type="text"的<input>元素。

3.4. 有三种方式可以剪切元素和内容:

3.4.1. 按下ctrl + x。

3.4.2. 在你的浏览器的Edit(编辑)菜单中选择"Paste(剪切)"。

3.4.3. 右键鼠标按钮, 在上下文菜单中选择"Paste(剪切)"命令。

3.5. 语法

3.5.1. html中:

<element oncut="myScript">

3.5.2. JavaScript中:

object.oncut=function(){myScript};

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>剪贴板事件</title>
	</head>
	<body>
		请复制口令: <input type="text" name="cmd" value="Ж8N8W€€FaEuw35Ж" disabled="disabled" oncopy="copyCompleted(event)" />
		<span id="span1" style="color: red;"></span><br /><br />
		请剪切口令: <input type="text" name="cmd" value="ɸ1ɹɺ3ɻɾ66€ɿʀ7ʁʂʃʄʅʆ90ʇ" oncut="cutCompleted(event)" />
		<span id="span2" style="color: red;"></span><br /><br />
		请粘贴以上两个口令: <textarea rows="10" cols="30" onpaste="pasteCompleted(event)"></textarea>
		<span id="span3" style="color: red;"></span>

		<script type="text/javascript">
			var span1 = document.getElementById("span1");
			var span2 = document.getElementById("span2");
			var span3 = document.getElementById("span3");

			function copyCompleted(e) {
				span1.innerHTML = "口令复制成功";
				setTimeout(function(){
					span1.innerHTML = "";
				}, 3000);
			}
			function cutCompleted(e) {
				span2.innerHTML = "口令剪切成功";
				setTimeout(function(){
					span2.innerHTML = "";
				}, 3000);
			}
			function pasteCompleted(e) {
				span3.innerHTML = "口令粘贴成功";
				setTimeout(function(){
					span3.innerHTML = "";
				}, 3000);
			}
		</script>
	</body>
</html>

4.2. 效果图

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
软件开发类投标项目全套解决方案模板
04-18
4. 剪贴板对象API 55 5. 日期控件API 55 6. 联系人对象API 55 7. 数据库对象API 55 8. 设备信息对象API 55 9. 下载对象API 55 10. 邮件对象API 55 11. 文件管理对象API 55 12. 图片浏览对象API 56 13. ...
C#.net_经典编程例子400个
05-17
299 7.6　系统监控　299 实例211　检测系统启动模式　300 实例212　内存使用状态监控　301 实例213　监视剪贴板内容　302 7.7　系统软件信息　303 实例214　获取用户名　303 实例215　获取系统...
工作手记之移动端中文输入法触发oninput事件的解决方法
weixin_34342207的博客
11-17 595
事件背景 工作过程中涉及到了移动端输入内容长度的限定，这就要求需要对输入过程中内容的变化进行监控和判定，以决定是否可以继续输入，所以就想着是否可以在相关输入处监听oninput事件？但是在手机端，中文输入过程中，默认输入框里面会显示相关的英文字母，这个时候会触发oninput事件，但是这个时候输入并没有结束，所以导致判断时机不正确。经过在...
input粘贴事件，@paste操作输入框复制粘贴事件
最新发布
L770515的博客
02-02 746
根据handlePaste事件来获取我们选中的开始下标和结束下标，再通过slice来更改我们输入框中的内容，小编使用这个的起因是因为之前做的input的输入框和文本框交互，对数据操作有个粘贴功能互斥了，粘贴的时候选中再粘贴会直接加在后面，所以需要把选中的截取再进行数据操作。输入框的@paste事件操作粘贴复制，选中的内容。例如图上这样，获取我们鼠标选中的内容，输入框。感兴趣的可以看我之前的文章！
你不知道的copy、cut、paste事件——实现页面内容禁止复制，实现复制内容添加额外字段，比如复制请注明出处
zyz00000000的博客
11-30 3452
聊聊copy复制、cut剪切、paste粘贴事件。 首先这三个事件都属于ClipboardEvent事件（剪切板事件）。复制、剪切、粘贴事件是浏览器对事件的监听，可以监听处理。但是默认情况下浏览器操作系统是可以复制、剪切、粘贴页面上的内容，将数据处理到操作系统的剪切板上。 比如：window系统的 Win+V快捷键可以展示剪切板。。。浏览器页面内容的复制、剪切、粘贴，正是浏览器操作系统的低层实现。 我们也可以通过监听浏览器的copy、cut、paste事件，从而阻止默认的复制内容行为。比如有的网站，不
浏览器剪切板事件的学习（copy，cut，paste）
【有梦想的菜】的博客
03-16 1195
粘贴文章所有内容用户剪切板要添加属于自己附加的内容到用户的剪切板
103个windows+xp运行命令.pdf
10-02
11. 剪贴簿查看器（clipbrd）：查看和管理剪贴板内容。 12. 命令行提示符（cmd）：打开命令提示符窗口，执行DOS命令。 13. 组件服务（dcomcnfg）：管理COM+组件和服务，用于系统组件的配置和调试。 14. 计算机管理...
用户必备资料 103个Windows XP运行命令
09-01
11. **剪贴簿查看器(clipbrd)**：查看和管理剪贴板中的内容。 12. **命令提示符(cmd)**：打开命令行界面，执行各种系统命令。 13. **组件服务(dcomcnfg)**：管理COM+组件和服务。 14. **计算机管理(compmgmt.msc)**...
Eclipse_Swt_Jface_核心应用_部分19
10-09
10.7 对剪贴板的操作 226 10.8 本章小结 229 第11章 SWT线程 230 11.1 线程概述 230 11.1.1 什么是线程 230 11.1.2 创建线程的两种方式 231 11.2 SWT中的UI线程 234 11.3 其他线程访问UI线程 234 ...
javascript 中使用oncopy 阻止页面的复制事件
KLW75
03-23 1482
javascript 中在浏览器复制过程中有两个复制事件，可以通过这两个事件来阻止页面复制。 onbeforecopy 与 oncopy <body oncopy = "return copyfalse()"> </body> <script type='text/javascript'> function pp(){ console.log('复制就会触发这里') return false; } </script> 注意 这里两个函数
JavaScript中的oncopy事件
TomHe789
05-09 971
作用：当用户拷贝添加了oncopy事件的元素时触发 使用方式：直接在HTML标签中添加该事件，通过JavaScript为指定元素添加该事件 提示：如果想要禁止复制某个元素的内容，可以在该事件的函数中添加return: false;，禁止浏览器的默认行为 例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oncopy事件&..
html5 oncopy,oncopy事件么使用
weixin_31510505的博客
07-06 403
oncopy事件在用户拷贝元素上的内容时触发，也就是当用户复制元素中存在的内容时，将触发oncopy事件。oncopy可以与img、input、p等元素一起使用。oncopy接受在oncopy调用时运行的单值脚本。(更多oncopy内容可以参考：HTML教程手册)有三种方式可以拷贝元素和内容：按下Ctrl+C在你的浏览器的 Edit(编辑) 菜单中选择 "Copy(复制)"右键鼠标按钮，在上下文菜...
实现监听浏览器复制事件 向剪贴板添加自定义信息功能
蔡武坤的博客
09-08 2790
/* 选中文本 */ const text = document.querySelector('.text'); const range = document.createRange(); // 创建选择对象 range.selectNode(text); window.getSelection().addRange(range); // 选中 window.getSelection()...
js 文本框监听粘贴事件，获取粘贴板上的图片数据
luyangbin01的专栏
04-07 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myInput" /> <script> document.getElementById('myInput').addEventLis
在浏览器中实现复制内容到剪切板中
oscar999的专栏
06-21 1万+
前端开发时， 经常有这种功能， 需要把网页中的有些内容复制到剪切板中。 针对IE浏览器来说， 实现起来就很简单， 因为直接有clipboardData 的对象可以使用， 但是对于其他浏览器来说， 并没有这个对象， 如何实现， 目前比较多的解法都是借助flash。 除此之外，这个功能如果应用在Extjs 中该如何实现。（目前为止， Extjs 本身并没有提供相关的方法）
JS实现点击链接将Input控件的值复制到剪贴板
爱投篮的程序猿的博客
07-12 932
JS实现点击链接将Input控件的值复制到剪贴板
表单禁用复制、粘贴、及右击菜单(contextmenu、oncopy、oncut、onpaste、onselectstart)...
weixin_30802171的博客
09-02 227
禁用右键菜单，可以使用oncontextmenu属性： <textarea oncontextmenu="return false"></textarea> 兼容性：http://www.quirksmode.org/dom/events/contextmenu.html 禁用复制，使用oncopy和oncut： <textarea oncopy=...
JavaScript操作剪贴板
smshuxue的专栏
11-06 1199
IE是第一个支持与剪贴板相关的事件，以及通过JavaScript访问剪贴板数据的浏览器。IE的实现成为了某种标准，不仅Safari 2、Chrome和Firefox 3也都支持类似的事件和剪贴板（Oprea不支持通过JavaScript访问剪贴板），就连后来的HTML 5也引入了剪贴板事件。下列就是6个剪贴板事件： beforecopy：在发生复制操作前触发；copy：在发生复制操作时触发c
HTML5实战与剖析之剪贴板事件
热门推荐
梦龙小站
02-14 9万+
很多网站当复制粘贴的时候，都会出现有关剪贴板的相关提示，在刚刚入行前端工程师的时候，我还在一直纳闷，这是怎么实现的呢。如今，咱们再也不用纳闷了，因为已经有浏览器把剪贴板相关事件纳入标准了。
C# 如何监听excel剪贴板复制事件
06-08
在C#中，可以使用System.Windows.Forms命名空间中的Clipboard类来监听剪贴板的复制事件。要监听Excel剪贴板复制事件，可以使用以下代码： ```csharp using System.Windows.Forms; // 监听剪贴板变化的事件 private void ClipboardMonitor() { // 添加剪贴板内容变化事件的处理 ClipboardMonitorForm clipboardMonitorForm = new ClipboardMonitorForm(); clipboardMonitorForm.ClipboardChanged += new ClipboardMonitorForm.ClipboardChangedEventHandler(clipboardMonitorForm_ClipboardChanged); clipboardMonitorForm.Show(); } // 剪贴板内容变化事件处理方法 private void clipboardMonitorForm_ClipboardChanged(ClipboardFormat format, object data) { if (format == ClipboardFormat.CF_TEXT) { string clipboardText = (string)data; // 处理剪贴板中的文本内容 } else if (format == ClipboardFormat.CF_HTML) { string clipboardHtml = (string)data; // 处理剪贴板中的HTML内容 } else if (format == ClipboardFormat.CF_BITMAP) { Bitmap clipboardBitmap = (Bitmap)data; // 处理剪贴板中的图片内容 } // 其他格式的处理 } // 剪贴板格式枚举 public enum ClipboardFormat : uint { CF_TEXT = 1, CF_BITMAP = 2, CF_HTML = 3, // 其他格式 } // 监听剪贴板内容变化的窗体 public class ClipboardMonitorForm : Form { public delegate void ClipboardChangedEventHandler(ClipboardFormat format, object data); public event ClipboardChangedEventHandler ClipboardChanged; protected override void WndProc(ref Message m) { base.WndProc(ref m); if (m.Msg == 0x031D) // WM_CLIPBOARDUPDATE { IDataObject clipboardData = Clipboard.GetDataObject(); foreach (var format in clipboardData.GetFormats()) { object data = clipboardData.GetData(format); ClipboardChanged?.Invoke((ClipboardFormat)Enum.Parse(typeof(ClipboardFormat), format), data); } } } } ``` 在上面的代码中，ClipboardMonitor方法启动一个窗体ClipboardMonitorForm，该窗体通过监听Windows消息WM_CLIPBOARDUPDATE来监控剪贴板内容变化。当剪贴板内容变化时，窗体获取剪贴板的数据对象，然后根据数据格式调用相应的事件处理方法。在事件处理方法中，可以获取剪贴板中的数据并进行处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值