Web js实现复制文本到粘贴板
作者:Genven_Liang
这篇文章主要为大家详细介绍了Web js实现复制文本到粘贴板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Web 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JavaScript实现一键复制文本功能的示例代码
- 使用js实现复制功能
- 使用 JS 复制页面内容的三种方案
- JavaScript实现一键复制内容剪贴板
- js复制文本到粘贴板(Clipboard.writeText())
- JS实现一键复制
- Vue中使用highlight.js实现代码高亮显示以及点击复制
- js实现复制粘贴的两种方法
- JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
- JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
- js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)
- 简单实现兼容各大浏览器的js复制内容到剪切板
- JavaScript 实现完美兼容多浏览器的复制功能代码
- 兼容主流浏览器的JS复制内容到剪贴板
- js实现的复制兼容chrome和IE
- 兼容所有浏览器的js复制插件Zero使用介绍
- 用js将内容复制到剪贴板兼容浏览器
- js复制网页内容并兼容各主流浏览器的代码
- JS复制内容到剪切板的实例代码(兼容IE与火狐)
- JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
- 多浏览器兼容性比较好的复制到剪贴板的js代码
- GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
- 兼容IE与Firefox的js 复制代码
- JavaScript 复制功能代码 兼容多浏览器
- 至2023年最好用的兼容多浏览器的原生js复制函数copyText