103_剪贴板事件
1. oncopy事件
1.1. oncopy事件在用戶拷貝元素上的內容時觸發(fā)。
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事件在用戶向元素中粘貼文本時觸發(fā)。
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事件在用戶剪切元素的內容時觸發(fā)。
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. 效果圖
總結
- 上一篇： 102_自定义事件
- 下一篇： 104_鼠标事件对象