將文本復(fù)制到剪切板的多種解決方案(2018-08-17)

原生JS實現(xiàn):

const copyText = (text) => {
  let e = document.createElement('input');
  e.setAttribute('id', 'copyTextBox');
  e.value = text;
  document.getElementsByTagName('body')[0].appendChild(e);
  document.getElementById('copyTextBox').select();
  document.execCommand("copy");
  document.getElementById('copyTextBox').remove();

  let tag = document.getElementById('tag');
  tag.style.display = "block";
  setTimeout(() => {
    tag.style.display = "none";
  }, 3000);
}

為什么非要寫入document中呢监署,因為颤专,如果不寫入document中的話create的input標簽是不可拓展的。簡單來說就是不能給他value的钠乏。

     <div>
       <div className="share-overlay" onClick={stopProp}>
          <div className="share-link">
            <p>分享鏈接</p>
            <p>{url}</p>
            <Button onClick={() => copyText(url)}>復(fù)制鏈接</Button>
            <div className="success-tag" id="tag">復(fù)制成功</div>
          </div>
          <div className="qr-code">
            <QRCode value={url} size={100} />
            <span id="qr-code"></span>
            <p>掃描二維碼 分享到微信</p>
          </div>
          <div className="clearfix"></div>
        </div>
      </div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末栖秕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子晓避,更是在濱河造成了極大的恐慌簇捍,老刑警劉巖只壳,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異暑塑,居然都是意外死亡吼句,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門事格,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惕艳,“玉大人,你說我怎么就攤上這事驹愚≡短拢” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵逢捺,是天一觀的道長终娃。 經(jīng)常有香客問我,道長蒸甜,這世上最難降的妖魔是什么棠耕? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮柠新,結(jié)果婚禮上窍荧,老公的妹妹穿的比我還像新娘。我一直安慰自己恨憎,他們只是感情好蕊退,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著憔恳,像睡著了一般瓤荔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钥组,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天输硝,我揣著相機與錄音,去河邊找鬼程梦。 笑死点把,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的屿附。 我是一名探鬼主播郎逃,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼挺份!你這毒婦竟也來了褒翰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎优训,沒想到半個月后朵你,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡型宙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年撬呢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妆兑。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡魂拦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搁嗓,到底是詐尸還是另有隱情芯勘,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布腺逛,位于F島的核電站荷愕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏棍矛。R本人自食惡果不足惜安疗,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望够委。 院中可真熱鬧荐类,春花似錦、人聲如沸茁帽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽潘拨。三九已至吊输,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铁追,已是汗流浹背季蚂。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脂信,地道東北人癣蟋。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像狰闪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子濒生,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理埋泵,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 向量叉乘 1086題意:給出幾條線段的始末點坐標丽声,求解這幾條線段共有幾個交點礁蔗。解題需要使用到向量的叉乘關(guān)系:a×b...
    碧影江白閱讀 1,625評論 0 0
  • 隆維閱讀 148評論 0 0
  • 早上把二寶收拾好交奶奶浴井,出門,開車走在上班的路上霉撵,音樂響起磺浙,熟悉的老歌在車里流淌。拐彎徒坡,進隧道撕氧,出隧道,豁然開朗喇完,...
    海藍26閱讀 899評論 15 11