最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js實現(xiàn)一鍵復制功能

 更新時間:2017年03月16日 16:12:58   作者:小龍神  
本文主要介紹了js實現(xiàn)一鍵復制功能的方法,具有很好的參考價值。下面跟著小編一起來看下吧

項目描述:最近做一個移動端活動頁面,用戶抽獎后會生成一個兌換碼,為了優(yōu)化用戶體驗,需要做一個復制按鈕,能夠一鍵復制兌換碼。

項目需求: 兼容移動端所有主流瀏覽器。并且做為安卓和IOS的H5頁面。

目前能夠?qū)崿F(xiàn)復制功能的方法有以下幾種:

  1. execCommand("copy");
  2. clipboardData;
  3. ZeroClipboard.js

1.execCommand:是doucment對象的方法,可以實現(xiàn)瀏覽器菜單的很多功能,如保存文件,打開新文件,撤銷,復制,等等??梢愿玫耐瓿晌谋揪庉?/strong>

有如下用法:

【全選】

格式:document.execCommand("SelectAll");

【打開】

格式:document.execCommand("Open");

【另存為】

格式:document.execCommand("SaveAs");

【打印】

格式:document.execCommand("print");

【剪切】

格式:document.execCommand("Cut","false",null);

【刪除】

格式:document.execCommand("Delete","false",null);

【改變文本字體】

格式:document.execCommand("FontName","false",sFontName);

【改變字體大小】

格式:document.execCommand("FontSize","false",sSize|iSize);

【使絕對定位的元素可拖動】

格式:document.execCommand("2D-Position","false","true");

【復制】

格式:document.execCommand("Copy","false",null);

等等

應用實例:

HTML:

<input onclick="copy()" value="你好.要copy的內(nèi)容!">

js代碼:

function copy(){
 var Url2=document.getElementById("js-copy-text");
 Url2.select(); // 選擇對象
 try{
  if(document.execCommand('copy', false, null)){
   document.execCommand("Copy");
   alert("已復制好,可貼粘。");
  } else{
   alert("復制失敗,請手動復制");
  }
  } catch(err){
   alert("復制失敗,請手動復制");
  }
}

注意:經(jīng)測試該方法,PC端IE需要手動設置權(quán)限,其他瀏覽器均支持,M端很少瀏覽器支持;

2. clipboardData:對象提供了對剪貼板的訪問

clipboardData有三個方法:

  1. clearData(sDataFormat)刪除剪貼板中指定格式的數(shù)據(jù);
  2. clearData(sDataFormat)getData(sDataFormat)從剪貼板中獲取制定格式的數(shù)據(jù);
  3. clearData(sDataFormat)setData(sDataFormat,sData)給剪貼板賦予指定格式的數(shù)據(jù),返回true表示操作成功;

應用實例:

<input onclick="copy(this)" value="你好.要copy的內(nèi)容!">

js代碼:

function copy(){
 window.clipboardData.setData("text",document.getElementById("mytext").value);
 alert("The text is on the clipboard, try to paste it!");
}  

注意:經(jīng)測試該方法,僅在IE瀏覽器中有效;

在其他瀏覽器運行會報錯:

firefox:TypeError: window.clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined

經(jīng)查資料:

MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help.dottoro.com/ljctuhrg.php 也表示該方法出于對安全性的考慮,現(xiàn)在只支持IE:
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • 淺談webpack4.x 入門(一篇足矣)

    淺談webpack4.x 入門(一篇足矣)

    這篇文章主要介紹了淺談webpack4.x 入門(一篇足矣),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 原生JS面向?qū)ο髮崿F(xiàn)打字小游戲

    原生JS面向?qū)ο髮崿F(xiàn)打字小游戲

    這篇文章主要為大家詳細介紹了原生JS面向?qū)ο髮崿F(xiàn)打字小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Bootstrap對話框使用實例講解

    Bootstrap對話框使用實例講解

    這篇文章主要為大家詳細介紹了Bootstrap對話框使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • JavaScript閉包原理與用法實例分析

    JavaScript閉包原理與用法實例分析

    這篇文章主要介紹了JavaScript閉包原理與用法,結(jié)合實例形式分析了javascript閉包的概念、功能、常見問題及相關(guān)操作技巧,需要的朋友可以參考下
    2018-08-08
  • react基本安裝與測試示例

    react基本安裝與測試示例

    這篇文章主要介紹了react基本安裝與測試,結(jié)合實例形式分析了react基本安裝命令、引用與測試相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2020-04-04
  • JavaScript實現(xiàn)圖片瀑布流和底部刷新

    JavaScript實現(xiàn)圖片瀑布流和底部刷新

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片瀑布流和底部刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法

    mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法

    這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實現(xiàn)方法,需要的朋友可以參考下
    2017-10-10
  • JavaScript數(shù)組和循環(huán)詳解

    JavaScript數(shù)組和循環(huán)詳解

    這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲和訪問值、以相反的順序存儲和訪問值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下
    2015-04-04
  • JavaScript實現(xiàn)更換頭像功能

    JavaScript實現(xiàn)更換頭像功能

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)更換頭像功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 分析 JavaScript 中令人困惑的變量賦值

    分析 JavaScript 中令人困惑的變量賦值

    分析 JavaScript 中令人困惑的變量賦值...
    2007-08-08

最新評論

西昌市| 安多县| 六安市| 台安县| 塘沽区| 漾濞| 沧源| 凉山| 启东市| 焦作市| 上犹县| 汶上县| 赣榆县| 锦州市| 神木县| 肥城市| 恭城| 吴堡县| 台前县| 伊金霍洛旗| 共和县| 饶平县| 正镶白旗| 孝义市| 仁寿县| 淮安市| 牟定县| 武汉市| 连山| 桂阳县| 文化| 湘乡市| 神池县| 信阳市| 甘肃省| 若尔盖县| 宁阳县| 凤翔县| 武邑县| 利川市| 舟曲县|