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

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

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

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

一、簡述

記--簡單用js實現(xiàn)將元素的文本內容復制到粘貼板。

二、效果

三、代碼

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: