DOM剪切板
我們常用到剪切板，在網(wǎng)頁(yè)操作中，如，csdn 的網(wǎng)站，會(huì)有一個(gè)復(fù)制按鈕，點(diǎn)擊后，會(huì)在復(fù)制的內(nèi)容下有一行內(nèi)容,提示復(fù)制的內(nèi)容來(lái)自csdn，并且下面會(huì)帶有相關(guān)的連接。
在網(wǎng)頁(yè)中有個(gè)對(duì)象clipboardData，此對(duì)象就是剪切板，它有三個(gè)函數(shù)可進(jìn)行操作：
1. getData("Text"),表示從剪切板中獲取信息，即有返回值
2. setData(“Text”,val).表示把val的值寫(xiě)入剪切板中
3. clearData("Text") ,清空剪切板
JS中是區(qū)分大小寫(xiě)的，另其中的參數(shù)Text是不能省略的。
以下是建立三個(gè)textarea，分別為ara1,ara2,ara3,放置四個(gè)按鈕，分別為復(fù)制、粘貼、清空、帶小尾巴復(fù)制。
點(diǎn)擊復(fù)制時(shí)會(huì)把a(bǔ)ra1復(fù)制到剪切板，點(diǎn)擊粘貼時(shí)會(huì)把復(fù)制的內(nèi)容寫(xiě)到ara2中，清空時(shí)會(huì)調(diào)用clearData函數(shù)，再在ara2中粘貼，你會(huì)發(fā)現(xiàn)顯示為null.
帶小尾巴按鈕是把a(bǔ)ra1中的內(nèi)容并帶個(gè)尾巴粘貼到ara3中。
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title></title><script type="text/javascript">function copy() {var svalue = document.getElementById("ara1").value;alert(svalue);clipboardData.setData('Text', svalue);}function paste() {var svalue = clipboardData.getData('Text');document.getElementById("ara2").value = svalue;}function cleara() {clipboardData.clearData("Text");}function copywithtailtotextarea() {var svalue = document.getElementById("ara1").value;svalue = svalue + "本復(fù)制的內(nèi)容網(wǎng)址:" + location.href;alert(svalue);clipboardData.setData("Text",svalue);document.getElementById("ara3").value = clipboardData.getData("Text");}</script> </head> <body><form id="form1" runat="server"><div><textarea id="ara1" rows="10">testtesttesttesttesttesttesttesttesttesttesttesttest</textarea> <textarea id="ara2" rows="10"></textarea><br /><input type="button" value="復(fù)制" οnclick="copy()"/> <input type="button" value="粘貼" οnclick="paste()"/><input type="button" value="清空粘貼板" οnclick="cleara()"/><input type="button" value="帶小尾巴復(fù)制" οnclick="copywithtailtotextarea()" /><textarea id="ara3" rows="30"></textarea></div></form> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/yagzh2000/archive/2013/05/20/3088503.html
總結(jié)
- 上一篇： 学习笔记-记ActiveMQ学习摘录与心
- 下一篇： Vagrant 快速入门