使用瀏覽器自帶功能實現一鍵複製

阿新 • • 發佈：2021-11-22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一鍵複製demo</title>
    <style type="text/css">
        .wrapper {
            position: relative;
        }

        #input {
            position: absolute;
            top:  
0;
            left: 0;
            opacity: 0;
            z-index: -10;
        }

        .btn{
            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -khtml-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user 
-select: none;

        }

        #text {
            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -khtml-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;


        }
    </style>
</head>

<body>
    <div class="wrapper">
        <p id="text" onclick="sss()">我把你當兄弟dsadsadasdas你卻想著複製我？</p>
        <input type="text" id="input">
        <button class="btn" onclick="copyText()">copy</button>
    </div>
</body>
<script>
    function 
 copyText() {
        var text = document.getElementById("text").innerText;
        var input = document.getElementById("input");
        input.value = text; // 修改文字框的內容
        input.select(); // 選中文字
        document.execCommand("copy"); // 執行瀏覽器複製命令
        alert("複製成功");
    }
    function sss(params) {
        console.log(111);
    }

</script>

</html>

ps：中間有一個不可選中文件的css

使用瀏覽器自帶功能實現一鍵複製

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

利用Angular elementRef實現一鍵複製功能

技術標籤：程式人生前端開發angular 前言由於在之前有個專案需要實現一鍵複製功能，一開始大多數都會想著自己用js手寫封著。後來發現angular有個機制，可以很簡單的實現一鍵複製功能。

js點選按鈕實現一鍵複製功能

技術標籤：js <div id="box">被複制內容</div> <button id="copyData">點選複製文字</button>

vue 實現一鍵複製功能（兩種方式）

方法一： <div class=\"mask-cont\"> <p><input id=\"input\" /></p> <button class=\"btns\" @click=\"copyToClip\">複製</button>

小程式中實現一鍵複製長段文字內容

做小程式開發，就知道其實小程式是有限制的，在小程式內無法開啟網址，只允許從一個小程式跳到另一個小程式。

利用Python程式碼實現一鍵摳背景功能

前言又是一個逛csdn發現的一個有趣的小專案，可以一鍵摳背景，需要用到removebg模組及其API，API可從其官網免費獲取，網址如下https://www.remove.bg/zh

vue一鍵複製實現筆記

0 環境系統環境：window編輯器：IDEA,vscode 1 準備 vue-clipboard2參考資料 2 安裝安裝vue-clipboard2

chrome瀏覽器自帶網頁擷取長圖功能

按F12(⌘Command + ⌥Option + I)開啟除錯介面隨後，按下Windows 為 Ctrl + Shift + P （⌘Command + ⇧Shift + P），輸入命令 Capture full size screenshot（只輸前幾個字母就能找到），敲下回車，Chro

教你整合Nearby Service實現一鍵Wi-Fi分享功能

前言朋友來家裡做客、顧客到店裡用餐…當他們想要給自己的手機連結Wi-Fi時，總免不了詢問Wi-Fi名稱和密碼。這種問密碼和給密碼的過程十分麻煩，常常還會有聽錯或者輸錯密碼的情況，更重要的是無意間會造成密碼洩露。

部落格園美化 | 自定義js<01>-新增文章markdown連結一鍵複製按鈕

1、進入部落格園系統設定 2、在【部落格側邊欄公告(支援HTML程式碼)】的程式碼框中貼上以下程式碼

vue一鍵複製實現

安裝vue-clipboard2 npm install --save vue-clipboard2 在main.js中引入它 import VueClipboard from \'vue-clipboard2\'

vue常用自定義指令directives防抖和一鍵複製

防抖v-throttle自定義指令實現 // 1.設定v-throttle自定義指令 Vue.directive(\'throttle\', {

PyQT5 實現快捷鍵複製表格資料的方法示例

本文主要介紹了PyQT5 實現快捷鍵複製表格資料的方法示例，分享給大家，具體如下：

Python 實現一鍵批量傳送電子郵件

上圖為要傳送的內容存為xls格式第一列是郵箱第二列是郵件定製內容場景是批量傳送運單號第二列是偽裝的運單號

shell實現一鍵證書申請和頒發指令碼

[root@centos8 data]#cat certificate.sh #********************************************************************#Author:zhangtianze#QQ:1185673631#Date:2020-08-07#FileName：certificate.sh#Copyright (C):202