js+html5實(shí)現(xiàn)復(fù)制文字按鈕
更新時(shí)間：2017年07月15日 15:18:07 作者：ouqi_qiou
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)復(fù)制文字按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js+html5實(shí)現(xiàn)點(diǎn)擊復(fù)制文字的按鈕，供大家參考，具體內(nèi)容如下
圖片展示：
注意css中的樣式，有些頁(yè)面復(fù)制不成功就是沒(méi)有添加那一句造成的。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
*{
-webkit-user-select: auto;
}
</style>
<body>
<span id="content">
你好，好久不見(jiàn)！
</span>
<button id="copyBT">復(fù)制</button>
<script>
function copyArticle(event) {
const range = document.createRange();
range.selectNode(document.getElementById('content'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("復(fù)制成功！");
}
document.getElementById('copyBT').addEventListener('click', copyArticle, false);
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
什么叫直覺(jué)解？根據(jù)目前流行的免殺方法，有這么幾種初級(jí)加密方法。進(jìn)制加密，URLEncode加密，加花2008-06-06
Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介
Bootstrap是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介，需要的朋友參考下2016-02-02
JavaScript 中字符串和數(shù)組的概念解析與多角度對(duì)比區(qū)分
JavaScript中的字符串和數(shù)組是兩種重要的數(shù)據(jù)結(jié)構(gòu),各有特點(diǎn)和應(yīng)用場(chǎng)景,字符串主要用于文本處理,是不可變的；數(shù)組用于存儲(chǔ)有序集合,是可變的,理解它們的區(qū)別和應(yīng)用場(chǎng)景,有助于編寫(xiě)更高效和易維護(hù)的代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
原生js實(shí)現(xiàn)autocomplete插件
這篇文章主要介紹了原生js實(shí)現(xiàn)autocomplete插件的相關(guān)資料,需要的朋友可以參考下2016-04-04
騰訊的ip接口 方便獲取當(dāng)前用戶(hù)的ip地理位置
在論壇中閑逛，無(wú)意中發(fā)現(xiàn)騰訊的ip接口。還是挺有意思的。大家可以利用下，這個(gè)IP接口所查詢(xún)到的還是比較準(zhǔn)確，我發(fā)給幾個(gè)朋友測(cè)試了一下都是正確的，畢竟是騰訊的東西。2010-11-11
JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配
所謂貪婪匹配就是匹配重復(fù)字符是盡可能多的匹配，非貪婪匹配就是盡可能少的匹配，下面通過(guò)一個(gè)例子給大家分享JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配，感興趣的朋友參考下吧2017-09-09
JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例詳解
這篇文章主要介紹了JavaScript定時(shí)器設(shè)置、使用與倒計(jì)時(shí)案例,詳細(xì)分析了javascript定時(shí)器的設(shè)置、取消、循環(huán)調(diào)用并附帶一個(gè)倒計(jì)時(shí)功能應(yīng)用案例,需要的朋友可以參考下2019-07-07
JS面向?qū)ο缶幊袒A(chǔ)篇（二） 封裝操作實(shí)例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊谭庋b操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο蠓庋b操作的相關(guān)概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript實(shí)現(xiàn)HTML5游戲斷線(xiàn)自動(dòng)重連的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)HTML5游戲斷線(xiàn)自動(dòng)重連的方法,需要的朋友可以參考下2017-09-09
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢(xún)、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07