js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本功能
最近遇到一個(gè)需求,需要點(diǎn)擊按鈕,復(fù)制 <p> 標(biāo)簽中的文本到剪切板
之前做過復(fù)制輸入框的內(nèi)容,原以為差不多,結(jié)果發(fā)現(xiàn)根本行不通
嘗試了各種辦法,最后使了個(gè)障眼法,實(shí)現(xiàn)了下面的效果
一、原理分析
瀏覽器提供了 copy 命令 ,可以復(fù)制選中的內(nèi)容
document.execCommand("copy")
如果是輸入框,可以通過 select() 方法,選中輸入框的文本,然后調(diào)用 copy 命令,將文本復(fù)制到剪切板
但是 select() 方法只對(duì) <input> 和 <textarea> 有效,對(duì)于 <p> 就不好使
最后我的解決方案是,在頁(yè)面中添加一個(gè) <textarea>,然后把它隱藏掉
點(diǎn)擊按鈕的時(shí)候,先把 <textarea> 的 value 改為 <p> 的 innerText,然后復(fù)制 <textarea> 中的內(nèi)容
二、代碼實(shí)現(xiàn)
HTML 部分
<style type="text/css"> .wrapper {position: relative;} #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <div class="wrapper"> <p id="text">我把你當(dāng)兄弟你卻想著復(fù)制我?</p> <textarea id="input">這是幕后黑手</textarea> <button onclick="copyText()">copy</button> </div>
JS 部分
<script type="text/javascript"> function copyText() { var text = document.getElementById("text").innerText; var input = document.getElementById("input"); input.value = text; // 修改文本框的內(nèi)容 input.select(); // 選中文本 document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令 alert("復(fù)制成功"); } </script>
親測(cè),F(xiàn)irefox 48.0,Chrome 60.0,IE 8 都能用
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
- js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
- JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊復(fù)制鏈接的方法
- 用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制當(dāng)前網(wǎng)址
- 點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例
- JavaScript 點(diǎn)擊觸發(fā)復(fù)制功能實(shí)例詳解
- 原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板
- JavaScript實(shí)現(xiàn)點(diǎn)擊復(fù)制功能具體代碼(JS訪問剪貼板相關(guān))
相關(guān)文章
JavaScript forEach 方法跳出循環(huán)的操作方法
這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)
鑒于UI妹妹每次交付過來的選項(xiàng)卡都夾帶了多多少少的js,而且每遇到選項(xiàng)卡就加一點(diǎn)js,造成垃圾低劣代碼逐漸堆積過多了,一直想做一個(gè)通用簡(jiǎn)潔的選項(xiàng)卡庫(kù)。2010-05-05非常不錯(cuò)的功能強(qiáng)大代碼簡(jiǎn)單的管理菜單美化版
由于網(wǎng)盤不穩(wěn)定,很多時(shí)候文件提示找不到,幸好U盤里存了. 喜歡這3個(gè)風(fēng)格的朋友們別在PM我啦.....我把文件傳到我服務(wù)器上了..2008-07-07JavaScript中如何校驗(yàn)接口是否重復(fù)提交
這篇文章主要為大家詳細(xì)介紹了在JavaScript中如何校驗(yàn)接口是否重復(fù)提交,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03javascript 裝載iframe子頁(yè)面,自適應(yīng)高度
2009-03-03JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁(yè)顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁(yè)顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08