js如何實現點擊復制功能，js點擊復制文本

ello，大家好，前段時間做舔狗日記小程序，需要一鍵復制，看了下文檔，小程序自帶復制功能，那么網頁js如何實現復制功能呢？

首先，我查了下，貌似可以實現對input和textarea等文本輸入框可以實現選中復制，針對div，p等標簽不可以，那么我們需要新建一個文本框標簽，不能給display:none; 我們需要懟他進行一個定位，讓透明看不見找不到，點擊復制，將需要復制的內容賦值給文本框，接著對文本框進行全選，在進行復制操作即可，代碼如下：

Markup

<p id="content">前端共享博客-專注前端行業精選- sharedblog.cn</p>
<textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea>
<button id="CopyBtn">復制</button>

JavaScript

端功能問題系列文章，點擊上方合集↑

序言

大家好，我是大澈！

本文約2000+字，整篇閱讀大約需要4分鐘。

本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。

如果您只需要解決問題，請閱讀第一、二部分即可。

如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。

1. 需求分析

點擊復制按鈕，將某一區域文本復制到粘貼板，并可以在任何地方粘貼使用。

長按某一區域文本1秒鐘，將文本復制到粘貼板，并可以在任何地方粘貼使用。

2. 實現步驟

2.1 項目中的應用場景說明

在學習如何使用之前，我們更重要的是要搞清楚，一般什么場景會用到文本復制功能。

文本一鍵復制和長按復制功能，我一直作為一種簡單的優化手段使用，且在項目中使用的頻率還算挺高的。

它可以提供更好的用戶體驗，減少用戶的操作步驟，并簡化復制文本內容的過程。這樣不僅僅是節省了用戶的時間和精力，更重要的是能提高應用操作的易用性、準確性。

以下是一些常見的應用場景：

分享鏈接或代碼：當用戶需要分享特定鏈接或代碼片段時，提供一鍵復制按鈕可以方便用戶將內容復制到剪貼板，以便他們可以粘貼到其他應用或發送給其他人。

復制文本消息：在某些應用中，用戶可能需要復制接收到的文本消息，如聊天應用或社交媒體應用。通過長按文本并觸發復制操作，用戶可以快速復制消息內容進行回復、引用或轉發。

復制分享內容：在某些應用中，用戶可能需要復制分享的內容，如文章、新聞、產品描述等。提供一鍵復制按鈕或長按復制功能可以讓用戶輕松復制所需內容，以便在其他平臺上分享或保存。
復制重要信息：當用戶需要復制重要信息，如訂單號、交易號、驗證碼等，一鍵復制或長按復制功能可以減少用戶手動輸入的錯誤，并提高復制操作的方便性和準確性。

搞清楚這些，然后下面，就是如何使用的問題了。

2.2 代碼實例

模板代碼：

<template>
<div>
<!-- 一鍵復制按鈕 -->
<button @click="copyText">一鍵復制</button>

<!-- 需要復制的文本區域 -->
<div
@mousedown="startLongPress"
@mouseup="cancelLongPress"
@mouseleave="cancelLongPress"
>
<h1>長按復制</h1>
{{ text }}
</div>
</div>
</template>

邏輯代碼：

<script setup>
let text = "要復制的文本";
let longPressTimer = null;

// 復制方法
const copyText = () => {
// 關鍵
navigator.clipboard
.writeText(text)
.then(() => {
window.alert("復制成功");
})
.catch((error) => {
window.alert("復制失敗", error);
});
};

// 開始長按
const startLongPress = () => {
longPressTimer = setTimeout(() => {
copyText();
}, 1000); // 設置長按時間閾值，單位為毫秒
};

// 取消長按
const cancelLongPress = () => {
clearTimeout(longPressTimer);
};
</script>

2.3實現說明

我們通過 navigator.clipboard.writeText 方法將文本復制到剪貼板。

在一鍵復制功能中，直接在按鈕的點擊事件中，調用 copyText 方法即可。

在長按復制功能中，通過 mousedown 事件觸發 startLongPress 方法啟動一個定時器，若長按一定時間后松開鼠標，則調用 copyText 方法執行復制操作；同時，通過 mouseup 和 mouseleave 事件觸發 cancelLongPress 方法，清除定時器，避免誤觸發復制操作。

大澈考慮到navigator對象大家可能用的比較少，所以對navigator對象簡單做了一下總結，有時間的朋友可見第三部分學習。

3. 問題詳解

3.1 關于navigator對象的總結

navigator 是一個內置的 JavaScript 對象，它表示瀏覽器的狀態和標識信息。

通過 navigator 對象，可以獲取有關瀏覽器的各種信息，包括用戶代理字符串、支持的特性和功能等。

navigator 對象提供了許多屬性和方法，以下是一些常用的屬性和方法：

navigator.userAgent：返回瀏覽器的用戶代理字符串，其中包含了關于瀏覽器、操作系統和設備的信息。常用于檢測瀏覽器類型和版本。

navigator.platform：返回瀏覽器運行的操作系統平臺，例如 "Win32"、"MacIntel" 等。

navigator.language：返回瀏覽器的首選語言，通常是一個標準的語言標簽，例如 "en-US"、"zh-CN" 等。

navigator.clipboard：提供訪問剪貼板的能力。通過 navigator.clipboard 對象，您可以讀取剪貼板內容或將文本、圖像等內容寫入剪貼板。

navigator.geolocation：提供獲取用戶位置信息的能力。通過 navigator.geolocation 對象，您可以使用瀏覽器的定位功能獲取用戶的經緯度坐標等位置信息。

navigator.cookieEnabled：返回一個布爾值，表示瀏覽器是否啟用了 cookie。

navigator.onLine：返回一個布爾值，表示瀏覽器是否處于聯網狀態。

navigator.javaEnabled()：返回一個布爾值，表示瀏覽器是否啟用了 Java。

navigator.plugins：返回一個表示已安裝插件的 PluginArray 對象，可以通過該對象獲取有關已安裝插件的信息。

navigator.mimeTypes：返回一個表示瀏覽器支持的 MIME 類型的 MimeTypeArray 對象，可以通過該對象獲取有關 MIME 類型的信息。

navigator.sendBeacon(url, data)：使用異步請求發送數據到指定的 URL，適用于在頁面卸載前發送數據，以確保數據的可靠傳輸。

navigator.vibrate(pattern)：觸發設備振動效果，可以傳遞一個表示振動模式的數組作為參數。

navigator.getBattery()：返回一個 Promise，用于獲取設備的電池信息，包括電量、充電狀態等。

navigator.mediaDevices.getUserMedia(constraints)：請求用戶授權訪問媒體設備（如攝像頭和麥克風），返回一個 Promise 對象，用于獲取媒體流。

結語

建立這個平臺的初衷：

打造一個僅包含前端問題的問答平臺，讓大家高效搜索處理同樣問題。
通過不斷積累問題，一起練習邏輯思維，并順便學習相關的知識點。
遇到難題，遇到有共鳴的問題，一起討論，一起沉淀，一起成長。

感謝關注微信公眾號：“程序員大澈”，然后加入問答群，讓我們一起解決實現所有BUG！

記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精。

在實際項目開發中，用到復制的地方還挺多，如一些鏈接過長不顯示，點擊一下載復制到剪切板或者是將復制的內容自動填到其他組件中，這個復制功能有些是純html頁面，有些是vue項目，本文章來總結常用的三種復制方式。

1 使用 clipboard 組件來實現復制功能

#1.安裝依賴
npm install --save v-clipboard

//2.在main.js中引入 并注冊組件
import Vue from 'vue'
import Clipboard from 'v-clipboard'
 
Vue.use(Clipboard)
 
 ```
 
```html
///3.使用
<template>
    <button v-clipboard="copyContent"
        v-clipboard:success="clipboardSuccessHandler" 
        v-clipboard:error="clipboardErrorHandler">    
        Copy to clipboard
   </button> 
</template>
  ```
```javascript
export default {
   data() {
      return {
         //定義復制成功的文本記錄變量
         copyContent:''
      }
   },
   methods: {
      //定義復制失敗的回調
      clipboardSuccessHandler ({ value, event }){
         console.log('success', value);
         this.$message.success("已復制");
      },
      //定義復制成功的回調方法
      clipboardErrorHandler ({ value, event }) {
         console.log('error', value)
      }
    }
}

2 來一段 JS

<el-table-column
  prop="versionUrl"
  header-align="center"
  align="center"
  label="升級包下載地址">
  <template slot-scope="scope">
    <el-button type="primary" plain @click="copyUrl(scope.row.versionUrl)">點擊復制</el-button>
  </template>
</el-table-column>


<script>
  
  export default {
    
    methods: {
      ///定義點擊復制的功能
      copyUrl(url){
        //創建一個 Input標簽 
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 選擇對象;
        console.log(oInput.value)
        // 執行瀏覽器復制命令
        /// 復制命令會將當前選中的內容復制到剪切板中
        /// 如這里構建的 Input標簽 
        document.execCommand("Copy"); 
        this.$message({
          message: '復制成功',
          type: 'success'
        });
        ///復制成功后再將構造的標簽 移除
        oInput.remove()
      },
}

3 使用 clipboard js 方式

第一步是引入 clipboard 代碼如下：

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
2 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

第二步就是使用了

<body>
    <div>
        <span class="app_title">APP號：</span>
        <input type="text" class="app_v" value="下載鏈接" id="target1" readonly="" />
    </div>
    <button class="app_btn" data-clipboard-action="copy" data-clipboard-target="#target1" id="copy_btn1">復制</button>

</body>

然后對應的 JS 代碼如下：

在線咨詢

上一篇：9.HTML鏈接標簽
下一篇：HTML5培訓機構：HTML5的常見用途

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商