103_剪贴板事件

最新推荐文章于 2023-08-09 23:23:03 发布

原创最新推荐文章于 2023-08-09 23:23:03 发布 · 784 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

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. 效果图