資訊專欄INFORMATION COLUMN
摘要：上周接到一個(gè)需求點(diǎn)擊按鈕，復(fù)制指定的文字到粘貼板。有了這兩個(gè)方法，前面的功能就有了大概的思路首先動(dòng)態(tài)創(chuàng)建元素，然后動(dòng)態(tài)制定執(zhí)行進(jìn)行選中，然后通過方法執(zhí)行復(fù)制即可。返回一個(gè)對象，表示用戶選擇的文本。將一個(gè)區(qū)域?qū)ο蠹尤脒x區(qū)。
上周接到一個(gè)需求——點(diǎn)擊按鈕，復(fù)制指定的文字到粘貼板。我也是第一次做這種功能，最后通過查資料實(shí)現(xiàn)了這個(gè)功能。
正文其實(shí)這個(gè)功能實(shí)現(xiàn)起來也不難，主要用到了兩個(gè)方法：execCommand和select。
execCommand：可以讓我們執(zhí)行如復(fù)制、剪切、粘貼等命令，還可以改變字體顏色、大小等。更多具體的用法可以看這里，在這就不說了。
select：只有input和textarea可以執(zhí)行該方法；用于選取文本框中的內(nèi)容。
有了這兩個(gè)方法，前面的功能就有了大概的思路：首先動(dòng)態(tài)創(chuàng)建input元素，然后動(dòng)態(tài)制定input[value]；執(zhí)行select()進(jìn)行選中，然后通過execCommand方法執(zhí)行復(fù)制即可。
接下來就是代碼實(shí)現(xiàn)了：
function copyContent(eleId){
var temp = document.createElement("input")
temp.setAttribute("value",document.getElementById(eleId).innerHTML)
document.body.appendChild(temp)
temp.select()
document.execCommand("copy")
document.body.removeChild(temp)
}
Demo地址
另一種方法上面的方面雖然可以實(shí)現(xiàn)功能，但創(chuàng)建一個(gè)input元素然后再刪掉感覺不太好，能不能直接copy指定DOM元素呢？其實(shí)是可以的，這里我們需要先介紹幾個(gè)API：
document.createRange()：返回一個(gè)Range對象，用來創(chuàng)建選中容器。
Range.selectNode(referenceNode)：用來設(shè)定一個(gè)包含節(jié)點(diǎn)和節(jié)點(diǎn)內(nèi)容的Range。
window.getSelection()：返回一個(gè) Selection 對象，表示用戶選擇的文本。
Selection.addRange(range):將一個(gè)區(qū)域（Range）對象加入選區(qū)。
Selection.removeRange(range)/removeAllRanges():從選區(qū)中移除一個(gè)區(qū)域/將所有的區(qū)域都從選區(qū)中移除。
要用到的API就上面這些，這里直接上Demo
下面是主要代碼：
function copyToClipboard(eleId){
var copyDOM = document.getElementById(eleId);
var range = document.createRange();
range.selectNode(copyDOM);
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91150.html
摘要：本文轉(zhuǎn)載自眾成翻譯譯者文藺鏈接原文譯者注本文講到的可能和我們通常理解的略有差異。文中部分主要講到的是，這一點(diǎn)可能在一些開發(fā)者看來是有爭議的。談到，最好也是最簡單的辦法是使用免費(fèi)開源的框架。需要快速開發(fā)打樣那可能最好的選擇。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/861原文：http://www.telerik.com/blogs/h...
摘要：授權(quán)破解版易優(yōu)企業(yè)建站系統(tǒng)易優(yōu)企業(yè)建站系統(tǒng)是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。去版權(quán)破解版強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。直接去易優(yōu)官網(wǎng)，購買商業(yè)授權(quán)即可去除版權(quán)。eyoucms v1.4.9授權(quán)破解版(易優(yōu)企業(yè)建站系統(tǒng))是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。eyoucms v1.4.9去版權(quán)破解版 強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。易優(yōu)cms破解授權(quán)...
摘要：手把手教你做個(gè)人火的時(shí)候，隨便一個(gè)都能賺的盆滿缽滿，但是，個(gè)人沒有服務(wù)端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。...
閱讀 2252·2021-11-16 11:44
閱讀 645·2019-08-30 15:55
閱讀 3278·2019-08-30 15:52
閱讀 3614·2019-08-30 15:43
閱讀 2201·2019-08-30 11:21
閱讀 440·2019-08-29 12:18
閱讀 1951·2019-08-26 18:15
閱讀 473·2019-08-26 10:32
