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