前端實(shí)現(xiàn)復(fù)制內(nèi)容

前端實(shí)現(xiàn)復(fù)制內(nèi)容

  • 將所需要的內(nèi)容賦值到一個(gè)的 textarea ,然后 select() 選取內(nèi)容

  • 調(diào)用 document.execCommand("copy",false,null);

  • 如果都是 input 框,可以不創(chuàng)建 textarea;但是很多時(shí)候不是,所以創(chuàng)建一個(gè)出來比較方便

  • 一直在找如何自動(dòng)復(fù)制也沒有實(shí)現(xiàn)

      <!DOCTYPE html>
      <html>
      <head>
          <title>test</title>
      </head>
      <body>
          <input type="text" name="" id="text_in" value="Copy Test.">
          <input type="button" name="" id="do_copy" value="Copy">
          <div id='test'>這是一個(gè)測(cè)試內(nèi)容</div>
      
          <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
          <script type="text/javascript">
          $(function () {
              var btn = document.getElementById('do_copy'),
                  text = document.getElementById('text_in'),
                  test = document.getElementById('test');
      
              btn.onclick = function () {
                  var transfer = document.getElementById('copy_transfer');
                  if (!transfer) {
                      transfer = document.createElement('textarea');
                      transfer.id = "copy_transfer";
                      transfer.style.position = 'absolute';
                      transfer.style.left = '-9999px';
                      transfer.style.top = '-9999px';
                      document.body.appendChild(transfer);
                  }
      
                  transfer.value = text.value;
                  transfer.value = test.innerText;
                  
                  transfer.focus();
                  transfer.select();
                  document.execCommand("copy",false,null);
              }
          })
          </script>
      </body>
      </html>
    

封裝過的 clipboard.js 還是很便捷的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末差购,一起剝皮案震驚了整個(gè)濱河市庆猫,隨后出現(xiàn)的幾起案子包斑,更是在濱河造成了極大的恐慌挎袜,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡贸弥,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門海渊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绵疲,“玉大人,你說我怎么就攤上這事臣疑】” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵讯沈,是天一觀的道長(zhǎng)郁岩。 經(jīng)常有香客問我,道長(zhǎng)芙盘,這世上最難降的妖魔是什么驯用? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任脸秽,我火速辦了婚禮儒老,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘记餐。我一直安慰自己驮樊,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布片酝。 她就那樣靜靜地躺著囚衔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雕沿。 梳的紋絲不亂的頭發(fā)上练湿,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音审轮,去河邊找鬼肥哎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛疾渣,可吹牛的內(nèi)容都是我干的篡诽。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼榴捡,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼杈女!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤达椰,失蹤者是張志新(化名)和其女友劉穎翰蠢,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啰劲,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躏筏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了呈枉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片趁尼。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖猖辫,靈堂內(nèi)的尸體忽然破棺而出酥泞,到底是詐尸還是另有隱情,我是刑警寧澤啃憎,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布芝囤,位于F島的核電站,受9級(jí)特大地震影響辛萍,放射性物質(zhì)發(fā)生泄漏悯姊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一贩毕、第九天 我趴在偏房一處隱蔽的房頂上張望悯许。 院中可真熱鬧,春花似錦辉阶、人聲如沸先壕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)垃僚。三九已至,卻和暖如春规辱,著一層夾襖步出監(jiān)牢的瞬間谆棺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工罕袋, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留改淑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓炫贤,卻偏偏與公主長(zhǎng)得像溅固,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兰珍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,028評(píng)論 0 2
  • 前端復(fù)制功能的若干 -- document.execCommand() 頁(yè)面里copy的功能目前copy主流有四種...
    乖乖果效36閱讀 25,954評(píng)論 1 1
  • 看了日本電影欺詐游戲侍郭,一部很好看的電影,過程扣人心弦,結(jié)局又溫情感人亮元,是我喜歡的電影類型猛计。 沒看第一...
    蕭垚呼和浩特閱讀 604評(píng)論 0 1
  • iOS資源大全中文版 我想很多程序員應(yīng)該記得 GitHub 上有一個(gè) Awesome - XXX 系列的資源整理。...
    CocoaC_Wang閱讀 2,850評(píng)論 1 10
  • 《它美盗温,獨(dú)特,小眾》 文 | 子曰 書桌上的瓶子里插了一枝玉蘭成肘,是從院外玉蘭樹下?lián)靵淼摹?想來它是被昨夜有力的風(fēng)刮...
    子曰漫曼閱讀 209評(píng)論 0 7