html5頁面ClipboardJS實現點選複製功能

阿新 • • 發佈：2019-02-10

從網上興高采烈的找了一個複製demo

結果集成了不能用

我還誤導了一群大概60多個人這樣子。。。。。

我這次從官網找的自己確實成功以後再來分享給大家

複製並且提示

<script src="//lib.baomitu.com/toastr.js/latest/js/toastr.min.js"></script>
<script src="//lib.baomitu.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<?php echo $codepay_html; ?>
<script>

    var clipboard = new Clipboard('.copy');
    clipboard.on('success', function (e) {
        toastr.success("複製成功,可掃碼付款時候貼上到金額欄付款");

    });
    clipboard.on('error', function(e) {
        document.querySelector('.copy');
        toastr.warning("複製失敗,請記住下必須付款的金額 不能多不能少否則不能成功");
    });
</script>

       <div class="amount" style="position: relative;"><span id="money">￥<?php echo $price ?></span>
            <div style="position: absolute;font-size: 10px;top: 29px;left: 75%;"><a href="#" class="copy" id="copy"
                                                                                    data-clipboard-text="<?php echo $price ?>">複製金額</a>
            </div>
        </div>

以下是官方文件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>this is 方案 1 </title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
    <!--以下三個是備用  瀏覽器打不開第一個 換下面的-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
    <!--<script src="https://unpkg.com/ 
[email protected]/dist/clipboard.min.js"></script>-->
</head>
<body>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
  Copy to clipboard
</button>

<hr>
<br>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

<script>
    //必須要初始化 第一種初始化
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is 方案 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
    <span>Copy</span>
</div>

<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<!--以下三個是備用  瀏覽器打不開第一個 換下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/[email protected]/dist/clipboard.min.js"></script>-->

<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
    var btn = document.getElementById('btn');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多個選擇器下的複製</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>

<!-- 2. Include library -->
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<!--以下三個是備用  瀏覽器打不開第一個 換下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/[email protected]/dist/clipboard.min.js"></script>-->

<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>

html5頁面ClipboardJS實現點選複製功能

從網上興高采烈的找了一個複製demo 結果集成了不能用我還誤導了一群大概60多個人這樣子。。。。。我這次從官網找的自己確實成功以後再來分享給大家複製並且提示 <script

Clipboard外掛實現點選複製功能，並且自動跳轉

Clipboard外掛是現在流行的實現複製功能的外掛之一，公司給了一個需求，要求能實現點選複製功能，於是乎就在這給大家分享一下經驗。外掛的下載以及使用百度搜索可以搜尋到，就不多說，直接上程式碼。 html部分，Clipboard功能很強大，它可以實現文字框內的複

js實現點選複製功能

一、實現點選按鈕，複製文字框中的的內容<script type="text/javascript">function copyUrl2(){var Url2=document.getElementById("biao1");Url2.select(); // 選擇

JS實現點選複製功能（完美解決移動端可用）

先看一下效果圖使用此方法不需要轉換什麼<p>標籤，直接就使用<textarea>標籤，就是把它的樣式修改了一下，將背景和邊框都改為你要的顏色就可以了上程式碼： //

bootstrap modal彈出框實現及實現按鈕點選複製功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

實現點選複製貼上功能

實現功能:實現點選轉換為固定格式的json格式;並且實現點選複製功能使用前端程式碼實現: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

【Html】Clipboard.js 實現點選複製，剪下板操作

可以使用cdn 或者直接下載設定好引用路徑(百度雲下載) <script type="text/javascript" src="./dist/clipboard.min.js"></script> html <input type

js實現點選複製文字內容

手機實現點選複製的坑

點選複製有三種方式兩種外掛另一種是原生的寫（我比較建議用原生寫）目前關於點選複製的外掛我知道的有ZeroClipboard.Core.js和clipboard.min.js ZeroClipboard.Core.js 看了好多這個依附於flash clipboard.min.js 安卓手機沒問題，

HTML5-video標籤-實現點選預覽圖播放或暫停視訊

HTML5-video標籤-實現點選預覽圖播放或暫停視訊之前關於視訊的控制更多的是運用複雜來實現，但在html5中新加入了<video>標籤以及相應的DOM，通過這項新特性，我們能對網頁中的視訊進行更多簡單的控制。以下屬性內容摘抄至W3CSchool 瀏覽器支援: In

用js實現點選複製文字

function copyText(ele){ //複製文字需要在文件中新增一個複製用的input var copyDOM = ele; //要複製文字的節點 var range = document.createRange(); //建立一個ra

ios實現點選複製文字到剪貼簿

移動端點選複製文字到剪貼簿： html程式碼： <span id="data">複製我到剪貼簿</span> <button class="button" type="button" id="button">點選複製</butt

Clipboard.js 實現點選複製

在開發過程中難免會遇到點選分享的需求，這裡有兩種實現方式：第一種：通過原生js 的方法用（存在相容性）： document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 引

js 實現點選複製文字內容

js 實現點選複製文字內容 <table> <tr><td>姓名：<span onclick="copyContent(this);" title="點選複製">張三</span></td>

手機軟鍵盤搜尋按鈕實現點選搜尋功能

手機軟鍵盤實現搜尋功能最近一個移動端的專案需要實現點選手機軟鍵盤的搜尋鍵實現點選頁面搜尋按鈕相同的功能，雖然功能挺小但是度娘了不短的時間才達到需求，下邊我就大概的說一下實現思路希望對大家有所幫助

音樂網站開發：實現點選按鈕切換頁面背景圖的功能

最近這一星期在做一個簡單小型的音樂播放器網站，目前各種功能基本都已經實現，包括切換上一曲下一曲，播放與暫停，隨機播放單曲迴圈順序播放模式切換，一首播放完畢自動按模式切換至下一曲，載入單句歌詞及所有歌詞等功能。另外就是本篇部落格要介紹的功能了，點

點選複製按鈕複製指定文字內容，實現網頁中的複製功能

ZeroClipboard實現跨瀏覽器點選複製文字功能

後臺開發過程中常常要實現點選複製文字的功能，但很多瀏覽器出於安全考慮不支援js複製文字，使用開源庫ZeroClipboard可以很好地解決該問題。在頁面上引入ZeroClipboard並配置好ZeroClipboard.swf的路徑。（ZeroClipboard使用fl

移動端實現點選按鈕複製功能

HTML程式碼 <div class="url"> <p id="codeNum"></p> <button class="code-btn" id="codeBtn" data-clipboard-action="

jq實現點選載入更多分頁功能

頁面上實現類似於下拉載入更多的功能，這種是點選載入更多。大致思路是：首先Ajax獲取到下一頁內容，返回json格式資料，如果是跨域請求可以用jsonp返回，通過jq的append()到某個元素後面此時分頁的page+1，可以在“載入更多”按鈕上把總頁數和當前

html5頁面ClipboardJS實現點選複製功能

相關推薦