js 複製粘貼功能記錄

時間 2019-11-20

標籤複製粘貼功能記錄欄目 JavaScript 简体版

原文原文鏈接

最近工做中須要在前端頁面中使用代碼完成剪貼板的讀寫，網上搜索了下相應的資料，記錄下...html

這個功能有兩個辦法一個是js方式，一個是使用flash前端

1、JS方法git

一、複製github

首先複製的過程分爲兩步曲，不管是使用手工仍是代碼，先來看看手工的瀏覽器

a、使用光標選中內容　　　　b、經過ctrl + c 進行復制安全

其實在代碼端也是同樣，以此用這個步驟來，html代碼以下this

1 <html>
2     <head>
3         <title></title>
4     </head>
5     <body>
6         <input id="content" value="我是內容君" />
7     </body>
8 </html>

上面ID爲content的input，其中的內容就是咱們要複製的spa

第一步：選中它，代碼以下插件

1 var range = document.createRange();
2 range.selectNode(document.getElementById("content"));
3 window.getSelection().addRange(range);

而後就是這樣的效果code

第二步：執行ctrl + c的操做

1 document.execCommand("copy");

代碼就一行，返回值爲true 表示成功

二、讀取

這個也就是ctrl + v的功能了，只有一行代碼

1 window.getSelection().toString();

效果以下

三、校驗兼容性

因爲安全相關考慮，不少瀏覽器都不支持在瀏覽器中操做剪貼板，因此爲了兼容性，能夠直接在瀏覽器中使用以下代碼

1 document.execCommand("copy");

若是返回true，則表示瀏覽器支持，若是返回false則表示不支持

2、使用flash插件

flash這邊權限比較大，能夠完成複製粘貼的過程，可是也有很大的侷限性，好比移動端就不支持flash，而後就是IE和火狐也不支持。

這邊的demo使用的是zeroclipboard，git上的網頁是https://github.com/zeroclipboard/zeroclipboard，官方demo和效果圖以下

1 <html>
2   <body>
3     <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
4     <script src="ZeroClipboard.js"></script>
5     <script src="main.js"></script>
6   </body>
7 </html>

var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {
    // `this` === `client`
    // `event.target` === the element that was clicked
    event.target.style.display = "none";
    alert("Copied text to clipboard: " + event.data["text/plain"] );
  } );
} );

差很少就是以上效果，可是我以爲仍是不咋地，畢竟前端只是在瀏覽器中寫的代碼，並非一個徹底的C/S程序.....總之在瀏覽器中進行剪切板上的操做沒有十全十美的。。。。。

搞定！！！！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。