JavaScript - 浏览器中点击拷贝内容

拼搏现实的明天。 2023-02-18 08:20 79阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于浏览器中点击button进行内容的拷贝, 节省一点时间, 以及了解实现的过程</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://wangdoc.com/javascript/dom/document.html#%E6%A6%82%E8%BF%B0" rel="nofollow">https://wangdoc.com/javascript/dom/document.html</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/queryCommandEnabled" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/API/Document/queryCommandEnabled</a> &nbsp; 2.实践/使用 
 <blockquote> 
 index.html 
 &nbsp; 
 &lt;!DOCTYPE&nbsp;html&gt; 
 &lt;html&gt; 
 &lt;head&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;document&nbsp;节点&nbsp;-&nbsp;复制内容&lt;/title&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="target"&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id='content'&nbsp;type="text"&nbsp;name="content"&nbsp;value='这是要复制的内容~~'&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;id="copy"&nbsp;type="button"&nbsp;value="Copy"&nbsp;&gt;Copy&lt;/button&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;copyText(dom)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;dom.value; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dom.focus(); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dom.select(); 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;当前是否有选中文字 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;success&nbsp;=&nbsp;document.execCommand('copy'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(success)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.info('Copy&nbsp;Ok'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error('Copy&nbsp;Fail!'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;doCopy(){ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//浏览器是否支持&nbsp;copy&nbsp;命令（选中内容复制到剪贴板） 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.queryCommandSupported('copy'))&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;targetDom&nbsp;=&nbsp;document.getElementById('content'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyText(targetDom); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error('浏览器不支持'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("copy").addEventListener("click",&nbsp;function(){ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;document.getElementById("content").value&nbsp;=&nbsp;"Hello&nbsp;World"; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doCopy(); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
 </blockquote> 截图: <img alt="" height="264" src="https://img-blog.csdnimg.cn/20200616183738234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="624"> &nbsp; 之后按下ctrl+v即可粘贴内容 &nbsp; &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td><a href="https://wangdoc.com/javascript/dom/document.html#%E6%A6%82%E8%BF%B0" rel="nofollow">https://wangdoc.com/javascript/dom/document.html</a></td> 
 </tr> 
 </tbody> 
</table>

后续补充

...