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

JS復(fù)制對(duì)應(yīng)id的內(nèi)容到粘貼板(Ctrl+C效果)

 更新時(shí)間:2017年01月23日 14:53:16   作者:鍋?zhàn)硬┛? 
這篇文章主要給大家介紹了利用JS實(shí)現(xiàn)復(fù)制指定對(duì)應(yīng)id的內(nèi)容到粘貼板(Ctrl+C效果),文中給出了詳細(xì)的介紹和示例代碼,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。

前言

最近在做一個(gè)按鈕,實(shí)現(xiàn)的效果是當(dāng)點(diǎn)擊后復(fù)制url到黏貼板,但不是當(dāng)前頁(yè)面url,而是對(duì)應(yīng)一個(gè)元素的url,且一個(gè)頁(yè)面會(huì)有多個(gè)url。一開(kāi)始找到一個(gè)方法,但是竟然只兼容IE瀏覽器,神奇了,竟然有只兼容IE的東西。后來(lái)發(fā)現(xiàn)一個(gè)zeroclipboard.js這個(gè)插件,但是怎么也搞不出那個(gè)效果,有點(diǎn)麻煩。

最后翻到了一個(gè)js封裝好的方法,有效!

想要實(shí)現(xiàn)的一個(gè)效果是,下面html代碼:

<tr>
 <td>
 <a id="copy_{$key}" onclick="getUrl('{$key}')">復(fù)制文件鏈接</a>
 <input id="file_{$key}" value="{$file.file_url}" style="margin-left: -9999px"/>
 </td>
</tr> 

點(diǎn)擊復(fù)制文件鏈接這個(gè)按鈕,復(fù)制input框里的value值,是傳進(jìn)去的一個(gè)url;首先點(diǎn)擊a標(biāo)簽會(huì)觸發(fā)getUrl這個(gè)函數(shù);傳進(jìn)去id用于找到對(duì)應(yīng)的input然后取值(因?yàn)楸闅v了多個(gè)td,有許多個(gè)input框一一對(duì)應(yīng)去?。?/p>

下面js代碼:

<pre><script type="application/javascript">
 
 function getUrl(id) {
  if (copyToClipboard(document.getElementById("file_"+id))){
   alert("成功復(fù)制到黏貼板!");
  }else{
   alert("復(fù)制到黏貼板失敗!");
  }
 }
 
 function copyToClipboard(elem) {
  // create hidden text element, if it doesn't already exist
  var targetId = "_hiddenCopyText_";
  var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
  var origSelectionStart, origSelectionEnd;
  if (isInput) {
   // can just use the original source element for the selection and copy
   target = elem;
   origSelectionStart = elem.selectionStart;
   origSelectionEnd = elem.selectionEnd;
  } else {
   // must use a temporary form element for the selection and copy
   target = document.getElementById(targetId);
   if (!target) {
    var target = document.createElement("textarea");
    target.style.position = "absolute";
    target.style.left = "-9999px";
    target.style.top = "0";
    target.id = targetId;
    document.body.appendChild(target);
   }
   target.textContent = elem.textContent;
  }
  // select the content
  var currentFocus = document.activeElement;
  target.focus();
  target.setSelectionRange(0, target.value.length);
 
  // copy the selection
  var succeed;
  try {
   succeed = document.execCommand("copy");
  } catch(e) {
   succeed = false;
  }
  // restore original focus
  if (currentFocus && typeof currentFocus.focus === "function") {
   currentFocus.focus();
  }
 
  if (isInput) {
   // restore prior selection
   elem.setSelectionRange(origSelectionStart, origSelectionEnd);
  } else {
   // clear temporary content
   target.textContent = "";
  }
  return succeed;
 }
</script></pre>

getUrl中調(diào)用了封裝好的copyToClipboard方法實(shí)現(xiàn)了功能。有一點(diǎn)的是html中input的樣式用style="margin-left: -9999px"進(jìn)行隱藏,因?yàn)椴恢罏槭裁从胻ype="hiden"或者display="none"去隱藏都只會(huì)獲取源代碼而不是動(dòng)態(tài)的url遍歷出來(lái)的值。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。

相關(guān)文章

  • 完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼

    完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼

    這篇文章主要給大家分享了完美兼容IE,chrome,ff的設(shè)為首頁(yè)、收藏本站及保存到桌面js代碼,有需要的小伙伴參考下。
    2014-12-12
  • Javascript中Null和undefined的簡(jiǎn)單理解

    Javascript中Null和undefined的簡(jiǎn)單理解

    在JavaScript中存在這樣兩種原始類型:Null與Undefined,這兩種類型常常會(huì)使JavaScript的開(kāi)發(fā)人員產(chǎn)生疑惑,在什么時(shí)候是Null,什么時(shí)候又是Undefined,下面這篇文章主要給大家介紹了關(guān)于Javascript中Null和undefined的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • NodeJS Express框架中處理404頁(yè)面一個(gè)方式

    NodeJS Express框架中處理404頁(yè)面一個(gè)方式

    這篇文章主要介紹了NodeJS Express框架中處理404頁(yè)面一個(gè)方式,原理就是把404路由放在最后匹配,也就是路由中沒(méi)有定義的全部轉(zhuǎn)到404頁(yè)面,需要的朋友可以參考下
    2014-05-05
  • JS檢測(cè)是否可以訪問(wèn)公網(wǎng)服務(wù)器功能代碼

    JS檢測(cè)是否可以訪問(wèn)公網(wǎng)服務(wù)器功能代碼

    檢測(cè)AC是否放行成功,是否可以訪問(wèn)公網(wǎng)阿里云服務(wù)器。下面給大家分享JS檢測(cè)是否可以訪問(wèn)公網(wǎng)服務(wù)器功能代碼,需要的的朋友參考下吧
    2017-06-06
  • javascript 回到頂部效果的實(shí)現(xiàn)代碼

    javascript 回到頂部效果的實(shí)現(xiàn)代碼

    本篇文章主要是對(duì)javascript 回到頂部效果的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-02-02
  • JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法示例

    JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法示例

    這篇文章主要介紹了JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法,結(jié)合實(shí)例形式分析了JavaScript創(chuàng)建與使用自定義對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下
    2020-01-01
  • JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用

    JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用

    這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場(chǎng)景與使用區(qū)別的介紹,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-09-09
  • 一組JS創(chuàng)建和操作表格的函數(shù)集合

    一組JS創(chuàng)建和操作表格的函數(shù)集合

    在用AJAX的時(shí)候,經(jīng)常要用JS操作DOM,當(dāng)涉及到數(shù)據(jù)列表的時(shí)候,那用表格比較多,這里寫(xiě)了組函數(shù)集合,專門用來(lái)操作表格,當(dāng)然,目前還有很多不足,但是對(duì)一些簡(jiǎn)單操作還是很方便的。
    2009-05-05
  • 微信小程序之下拉列表實(shí)現(xiàn)方法解析(附完整源碼)

    微信小程序之下拉列表實(shí)現(xiàn)方法解析(附完整源碼)

    這篇文章主要介紹了微信小程序之下拉列表實(shí)現(xiàn)方法解析(附完整源碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • JS在onclientclick里如何控制onclick的執(zhí)行

    JS在onclientclick里如何控制onclick的執(zhí)行

    這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下
    2016-05-05

最新評(píng)論

应城市| 大港区| 阜阳市| 巴彦县| 正镶白旗| 龙南县| 西乌珠穆沁旗| 德州市| 高陵县| 汉川市| 尉犁县| 石城县| 延津县| 扎囊县| 睢宁县| 台州市| 徐闻县| 洞口县| 隆德县| 启东市| 西畴县| 永年县| 西安市| 凤翔县| 宜良县| 莎车县| 海晏县| 霸州市| 枞阳县| 固阳县| 塔城市| 常德市| 诸暨市| 四子王旗| 高平市| 荥经县| 巴东县| 瓦房店市| 鄂伦春自治旗| 石狮市| 南平市|