js實現(xiàn)點擊按鈕復(fù)制文本功能

更新時間：2020年07月20日 15:05:24 作者：WiseWrong

這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)點擊按鈕復(fù)制文本的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近遇到一個需求，需要點擊按鈕，復(fù)制 <p> 標(biāo)簽中的文本到剪切板

之前做過復(fù)制輸入框的內(nèi)容，原以為差不多，結(jié)果發(fā)現(xiàn)根本行不通

嘗試了各種辦法，最后使了個障眼法，實現(xiàn)了下面的效果

一、原理分析

瀏覽器提供了 copy 命令，可以復(fù)制選中的內(nèi)容

document.execCommand("copy")

如果是輸入框，可以通過 select() 方法，選中輸入框的文本，然后調(diào)用 copy 命令，將文本復(fù)制到剪切板

但是 select() 方法只對 <input> 和 <textarea> 有效，對于 <p> 就不好使

最后我的解決方案是，在頁面中添加一個 <textarea>，然后把它隱藏掉

點擊按鈕的時候，先把 <textarea> 的 value 改為 <p> 的 innerText，然后復(fù)制 <textarea> 中的內(nèi)容

二、代碼實現(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>

親測，F(xiàn)irefox 48.0，Chrome 60.0，IE 8 都能用

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

$將\u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字的代碼$
將\u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字的代碼
如何把 \u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字,喜歡的朋友可以參考下。
2010-11-11
JavaScript圖片放大技術(shù)(放大鏡)實現(xiàn)代碼分享
這篇文章介紹了JavaScript圖片放大技術(shù)(放大鏡)實現(xiàn)代碼，有需要的朋友可以參考一下
2013-11-11
js鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法
下面小編就為大家?guī)硪黄猨s鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
javascript 避免閉包引發(fā)的問題
閉包的功能強大，但如果沒有正確理解閉包的概念，其結(jié)果往往出乎人的意料。例如，下面是一個較常見的問題
2009-03-03
微信小程序如何同時獲取用戶信息和用戶手機號
小程序登錄是現(xiàn)在小程序里面很普遍的一個功能,因為官方提供的方法,可以一鍵獲取到用戶信息,一鍵拿到手機號,這篇文章主要給大家介紹了關(guān)于微信小程序如何同時獲取用戶信息和用戶手機號的相關(guān)資料,需要的朋友可以參考下
2021-08-08
5分鐘快速掌握J(rèn)S中var、let和const的異同
在javascript中有三種聲明變量的方式：var、let、const，這個是對新手們來說應(yīng)該掌握的知識，所以這篇文章主要給大家介紹了關(guān)于如何通過5分鐘快速掌握J(rèn)S中var，let和const的異同，需要的朋友可以參考下
2018-09-09
PHP 實現(xiàn)一種多文件上傳的方法
之前做項目的時候在實現(xiàn)表單中file類型input選擇多圖片時有很多種實現(xiàn)方法，今天小編給大家分享基于php實現(xiàn)一種多文件上傳的方法，需要的朋友參考下吧
2017-09-09
深入理解javascript中的 “this”
本文主要介紹了javascript中“this”的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
JavaScript實現(xiàn)字符串與HTML格式相互轉(zhuǎn)換
這篇文章主要介紹了JavaScript實現(xiàn)字符串與HTML格式相互轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-03-03
javascript作用域、作用域鏈(菜鳥必看)
下面小編就為大家?guī)硪黄猨avascript作用域、作用域鏈(菜鳥必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06