日记首页
|
列表
|
添加日记
|
管理登陆
标题：php网页中添加复制按钮的代码
<div style=""><font face="Arial"><span style="font-size: 14px;"><br></span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;">添加复制按钮的代码：</span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;">参考：<a href="http://192.168.1.100:8080/html/123/%e6%8b%be%e5%85%89%e5%9d%9en3%e4%ba%91%e7%9b%98%e6%98%a0%e5%b0%84%e6%88%90%e7%a1%ac%e7%9b%98.php" target="_blank">拾光坞N3云盘映射成硬盘</a></span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"><br></span></font></div><div style=""><hr></div><div style=""><br></div><div style=""><font face="Arial"><span style="font-size: 14px;"><font color="red">要复制</span></font><span style="font-family: Arial; font-size: 14px;">的</span><font face="Arial"><span style="font-size: 14px;">内容</span></font><span style="font-size: 14px; font-family: Arial;">（加了红色标记代码）<br /></font></span></div><div style=""><font face="Arial"><span style="font-size: 14px;"><!-- 复制按钮 --> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"><button id="copyButton">点击复制</button> <br /></span></font></div><div style="">.......</div><div style="">略</div><div style="">.......</div><div style=""><font face="Arial"><span style="font-size: 14px;"> <script> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 获取复制按钮 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> var copyButton = document.getElementById('copyButton'); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 为复制按钮添加点击事件 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> copyButton.addEventListener('click', function() { </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 要复制的文本 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> var textToCopy = '</span></font><font face="Arial"><span style="font-size: 14px;">要复制</span></font><span style="font-family: Arial; font-size: 14px;">的</span><font face="Arial"><span style="font-size: 14px;">内容</span></font><font face="Arial"><span style="font-size: 14px;">'; </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 创建一个临时的textarea元素 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> var textarea = document.createElement("textarea"); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 设置textarea的内容为要复制的文本 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> textarea.value = textToCopy; </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 将textarea添加到body中（这一步是必须的，因为某些浏览器可能不允许复制非用户输入的文本） </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> document.body.appendChild(textarea); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 选中textarea中的文本 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> textarea.select(); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> try { </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 尝试复制选中的文本到剪贴板 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> var successful = document.execCommand('copy'); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> var msg = successful ? '成功复制' : '复制失败'; </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> console.log(msg); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // （可选）显示给用户看 </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> alert(msg); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> } catch (err) { </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> console.error('复制失败:', err); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> alert('复制失败'); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> } </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> // 移除textarea </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> document.body.removeChild(textarea); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> }); </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"> </script> </span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"></body></span></font></div><div style=""><font face="Arial"><span style="font-size: 14px;"></html></span></font></div>
