Web js實(shí)現(xiàn)復(fù)制文本到粘貼板

更新時(shí)間：2022年08月23日 10:52:48 作者：Genven_Liang

這篇文章主要為大家詳細(xì)介紹了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板的具體代碼，供大家參考，具體內(nèi)容如下

一、簡(jiǎn)述

記--簡(jiǎn)單用js實(shí)現(xiàn)將元素的文本內(nèi)容復(fù)制到粘貼板。

二、效果

三、代碼

<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>js復(fù)制內(nèi)容到粘貼板</title>
?? ?<script type="text/javascript">?? ?
?? ??? ?<!--隨機(jī)字符串-->
?? ??? ?var randomStr = "0123456789abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
?? ??? ?
?? ??? ?<!--生成隨機(jī)碼-->
?? ??? ?function genRandomCode(len){
?? ??? ??? ?
?? ??? ??? ?var randomCode = "";
?? ??? ??? ?var y = randomStr.length-1;
?? ??? ??? ?var x = 0;
?? ??? ??? ?
?? ??? ??? ?var i;
?? ??? ??? ?var index;
?? ??? ??? ?for(i=0; i<len; i++){
?? ??? ??? ??? ?<!--生成[x,y]范圍內(nèi)的隨機(jī)數(shù)-->
?? ??? ??? ??? ?index = Math.floor(Math.random()*(y+1-x)+x);
?? ??? ??? ??? ?
?? ??? ??? ??? ?<!--獲取字符串中的其中一個(gè)字符-->?? ??? ??? ??? ?
?? ??? ??? ??? ?randomCode += randomStr.charAt(index);
?? ??? ??? ?}
?? ??? ??? ?return randomCode;
?? ??? ?}
?? ??? ?
?? ??? ?<!--生成隨機(jī)碼并設(shè)置到input輸入框-->
?? ??? ?function setRandomCode(elementID, len){
?? ??? ??? ?var randomCode = genRandomCode(len);
?? ??? ??? ?var element = document.getElementById(elementID);
?? ??? ??? ?element.setAttribute("value", randomCode);
?? ??? ?}
?? ??? ?
?? ??? ?<!--復(fù)制elementID的內(nèi)容到粘貼板-->
?? ??? ?function copyElementText2Clipboard(elementID) {
?? ??? ??? ?<!--根據(jù)id拿到元素對(duì)象-->
?? ??? ??? ?var element = document.getElementById(elementID);
?? ??? ??? ?if(element == null){
?? ??? ??? ??? ?console.log("element is null, id:" + elementID);
?? ??? ??? ??? ?return;
?? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?<!--獲取元素內(nèi)容文本-->
?? ??? ??? ?var content = element.innerHTML;
?? ??? ??? ?
?? ??? ??? ?<!--復(fù)制到粘貼板-->
?? ??? ??? ?if(element.tagName == "INPUT"){
?? ??? ??? ??? ?<!--如果是input就直接復(fù)制-->
?? ??? ??? ??? ?element.setSelectionRange(0, 64);<!--選擇input中的第0個(gè)字符到64個(gè)字符，也就是最多選中32個(gè)字符-->
?? ??? ??? ??? ?element.select();<!--選中input的value-->
?? ??? ??? ??? ?var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
?? ??? ??? ??? ?if(isCopyOk){
?? ??? ??? ??? ??? ?alert("已復(fù)制");
?? ??? ??? ??? ?}
?? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?<!--創(chuàng)建一個(gè)臨時(shí)的隱藏的input，并將它的value賦值為content，然后copy到粘貼板-->
?? ??? ??? ??? ?const input = document.createElement("input");<!--創(chuàng)建input-->
?? ??? ??? ??? ?input.setAttribute("readonly", "readonly");<!--設(shè)置為只讀-->
?? ??? ??? ??? ?input.setAttribute("value", content);<!--設(shè)置input的value-->
?? ??? ??? ??? ?document.body.appendChild(input);<!--將input添加到body-->
?? ??? ??? ??? ?input.setSelectionRange(0, 64);<!--選擇input中的第0個(gè)字符到64個(gè)字符，也就是最多選中32個(gè)字符-->
?? ??? ??? ??? ?input.select();<!--選中input的value-->
?? ??? ??? ??? ?var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
?? ??? ??? ??? ?document.body.removeChild(input);<!--移除剛才臨時(shí)添加的input-->
?? ??? ??? ??? ?if(isCopyOk){
?? ??? ??? ??? ??? ?alert("已復(fù)制");
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?<!--復(fù)制eSrcID的文本到eDestID-->
?? ??? ?function copyElmText(eSrcID, eDestID) {
?? ??? ??? ?var elementSrc = document.getElementById(eSrcID);<!--獲取元素1對(duì)象-->
?? ??? ??? ?var elementDest = document.getElementById(eDestID);<!--獲取元素1對(duì)象-->
?? ??? ??? ?if(elementSrc == null){
?? ??? ??? ??? ?console.log("elementSrc:"+elementSrc+" is null.");
?? ??? ??? ??? ?return;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if(elementDest == null){
?? ??? ??? ??? ?console.log("elementDest:"+elementDest+" is null.");
?? ??? ??? ??? ?return;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?<!--將元素2的value屬性設(shè)置為元素1的文本 elementDest.setAttribute("value", elementSrc.innerHTML);在國(guó)瓷設(shè)置后設(shè)置成功但是顯示不刷新-->?? ??? ??? ?
?? ??? ??? ?elementDest.value=elementSrc.innerHTML;
?? ??? ??? ?
?? ??? ?}
? ? </script>
? </head>
? <body>
?? ?<span>隨機(jī)碼</span>
?? ?<input type="text" id='RandomCode' name="RandomCode" value="" readonly="readonly" />
?? ?<input type='button' onclick='setRandomCode("RandomCode", "16")' title='生成隨機(jī)碼' value="生成隨機(jī)碼" />
?? ?<input type='button' onclick='copyElementText2Clipboard("RandomCode")' title='復(fù)制隨機(jī)碼到粘貼板' value="復(fù)制隨機(jī)碼" />
?? ?</br>
?? ?</br>
?? ?<span>地址</span>
?? ?<input type="text" id='Addr' name="text1" value="test">
?? ?<input type='button' onclick='copyElmText("defaultAddr", "Addr")' title='將括號(hào)內(nèi)容填充到輸入框' value="設(shè)為默認(rèn)地址" />
?? ?(<span id="defaultAddr" title="" >xxx省xxx市xxx縣</span>)
?? ?<input type='button' onclick='copyElementText2Clipboard("defaultAddr")' title='復(fù)制到粘貼板' value="復(fù)制" />
?? ?</br>
?? ?</br>
?? ?<textarea id='textarea1' rows="20" cols="50">
?? ?</textarea>
?? ?<input type='button' onclick='javascript:document.getElementById("textarea1").value=""' title='清空內(nèi)容' value="清空" />
? </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: