這篇文章主要講解了“怎么使用js實現復制文本到粘貼板”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用js實現復制文本到粘貼板”吧！
<!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]范圍內的隨機數-->
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) {
<!--根據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
{
<!--創建一個臨時的隱藏的input，并將它的value賦值為content，然后copy到粘貼板-->
const input = document.createElement("input");<!--創建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>感謝各位的閱讀，以上就是“怎么使用js實現復制文本到粘貼板”的內容了，經過本文的學習后，相信大家對怎么使用js實現復制文本到粘貼板這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
