怎么使用js實現(xiàn)復(fù)制文本到粘貼板

發(fā)布時間：2022-08-23 11:51:39 來源：億速云閱讀：134 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“怎么使用js實現(xiàn)復(fù)制文本到粘貼板”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用js實現(xiàn)復(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);
                
                <!--獲取字符串中的其中一個字符-->                
                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拿到元素對象-->
            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個字符到64個字符，也就是最多選中32個字符-->
                element.select();<!--選中input的value-->
                var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
                if(isCopyOk){
                    alert("已復(fù)制");
                }
            }            
            else
            {
                <!--創(chuàng)建一個臨時的隱藏的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個字符到64個字符，也就是最多選中32個字符-->
                input.select();<!--選中input的value-->
                var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
                document.body.removeChild(input);<!--移除剛才臨時添加的input-->
                if(isCopyOk){
                    alert("已復(fù)制");
                }
            }
            
        }
        
        <!--復(fù)制eSrcID的文本到eDestID-->
        function copyElmText(eSrcID, eDestID) {
            var elementSrc = document.getElementById(eSrcID);<!--獲取元素1對象-->
            var elementDest = document.getElementById(eDestID);<!--獲取元素1對象-->
            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);在國瓷設(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='將括號內(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>

感謝各位的閱讀，以上就是“怎么使用js實現(xiàn)復(fù)制文本到粘貼板”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用js實現(xiàn)復(fù)制文本到粘貼板這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

怎么使用js實現(xiàn)復(fù)制文本到粘貼板

效果

代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽