在浏览器中实现复制内容到剪切板中

最新推荐文章于 2024-07-19 18:09:50 发布
最新推荐文章于 2024-07-19 18:09:50 发布
阅读量1.3w 收藏 3
点赞数
分类专栏： 130-Web语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/51726684
版权

前言

前端开发时， 经常有这种功能， 需要把网页中的有些内容复制到剪切板中。

针对IE浏览器来说， 实现起来就很简单， 因为直接有clipboardData 的对象可以使用，

但是对于其他浏览器来说， 并没有这个对象， 如何实现， 目前比较多的解法都是借助flash。

除此之外，这个功能如果应用在Extjs 中该如何实现。（目前为止， Extjs 本身并没有提供相关的方法）


在IE中的实现

在IE中实现起来就很简单， 使用 window.clipboardData 这个对象的setData 方法就可以了。

直接看实例：


                

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  oscar999
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
Web功能之复制粘贴剪切板

				
			

			

				

					Alphamilk的博客
				

				

					04-25
					
					1094
					
				

			

		

		

			
				
通过创建Range对象，将其绑定到某个拖放源元素上，并在drop事件触发时获取目标元素上被拖放至的位置，从而完成元素的拖放操作。因此，在执行复制操作前，需要先清空当前选择区域，然后再将选中的文本内容添加到新创建的Range对象中，在执行完复制操作后，再次清空选择区域。方法，可以清空当前页面的所有文本选择，保证下一次操作时用户处于没有选中任何文本的状态，从而确保页面的正常交互和操作行为。方法的作用是将指定的Range对象添加到当前选择区域中，以便后续文本复制操作能够精确地复制我们所选中的文本内容。

			
		

	



                

              
                



	

		

			

				
					
万能的“一键复制到剪贴板”，支持IE、火狐、谷歌及移动版浏览器

					
热门推荐

				
			

			

				

					JustinLiu的博客
				

				

					03-15
					
					1万+
					
				

			

		

		

			
				
万能的“一键复制到剪贴板”，支持IE、火狐、谷歌及移动版浏览器

			
		

	



                


  
              

                


	

		

			

				
					
探索现代Web开发：WebKit的剪贴板API革新

					
最新发布

				
			

			

				

					2401_85760095的博客
				

				

					07-19
					
					959
					
				

			

		

		

			
				
WebKit，作为Safari、QQ浏览器等众多浏览器的底层引擎，其剪贴板API（Clipboard API）提供了一种现代、高效的方式来实现这些功能。WebKit的剪贴板API为Web开发者提供了强大的工具，使得Web应用能够更加自然地与用户的剪贴板进行交互。通过本文的介绍和示例代码，读者应该能够了解如何使用这些API，并在自己的项目中实现相关的功能。剪贴板API为Web应用提供了与系统剪贴板交互的能力，使得Web页面能够读取和写入剪贴板数据。，那里有详细的文档和更多的示例。

			
		

	





	

		

			

				
					
浏览器中如何实现拷贝到剪贴板功能

				
			

			

				

					油墨香^-^的博客
				

				

					01-13
					
					857
					
				

			

		

		

			
				
它一般可以使用第三方库 clipboard-copy 来实现，源码很简单，可以读一读目前最为推荐的方式是使用进行实现而对于一些不支持的浏览器，使用以下 API 进行复制选中:复制:(已被废弃)

			
		

	



		

			
		



	

		

			

				
					
javascript操作浏览器剪贴板

				
			

			

				

					心语的专栏
				

				

					12-30
					
					238
					
				

			

		

		

			
				

<script>
function copyToClipboard(txt) {   
     if(window.clipboardData) {   
             window.clipboardData.clearData();   
             window.clipboardData.setData("Text", txt);   
     ...

			
		

	





	

		

			

				
					
html图片如何复制到剪贴板,记js复制图片到剪贴板的坑

				
			

			

				

					weixin_39907220的博客
				

				

					06-04
					
					820
					
				

			

		

		

			
				
故事背景，需要直接在页面上点击一键粘贴按钮，自动复制服务生成的图片到剪贴板方便业务一些粘贴发送给客户。1、开始做法，使用原生的document.execCommand('copy')进行复制，代码如下。虽然也能实现了图片的复制，但粘贴的结果不是很理想，有些只能在微信上粘贴，钉钉、浏览器富文本上不能；有些是微信可以钉钉、富文本不行。总之就会出现有些黏贴不到的情况。#原生js写法const targe...

			
		

	





	

		

			

				
					
Ext扩展控件，支持复制，粘贴，剪切

				
			

			

				

					04-20
				

			

		

		

			
				
Ext扩展控件，支持复制，粘贴，剪切
ext plugin Copy Paste cut

			
		

	





	

		

			

				
					
浏览器点击复制粘贴到剪切板的解决

				
			

			

				

					weixin_30703911的博客
				

				

					09-14
					
					973
					
				

			

		

		

			
				
最近在做一个东西，需要的是复制文本里的内容
稍微研究了下关于H5的复制粘贴到剪切板的api，感觉兼容不尽人意
要么就是浏览器之间，要么就是方法需要支持https才可以，寻找了很久才找到一个符合我期许的一个插件clipboard.js
使用方法也是比较简单，直接引入js就可以使用，非常的方便快捷

1 <script type='text/javascript' src="https...

			
		

	





	

		

			

				
					
简单实现兼容各大浏览器的js复制内容到剪切板

				
			

			

				

					10-23
				

			

		

		

			
				
去看了几个常用的网站，都是用的透明flash遮挡“复制到剪贴板”按钮，所以当你点击按钮的时候，点击的其实是flash，然后把你需要复制的内容传入到了flash，最后通过flash的复制功能把传入的内容复制到了剪贴板。

			
		

	





	

		

			

				
					
h5复制到剪切板兼容ios浏览器

				
			

			

				

					03-25
				

			

		

		

			
				
ios+android+h5复制剪切板

			
		

	





	

		

			

				
					
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

				
			

			

				

					10-20
				

			

		

		

			
				
文章还补充说明了，如果使用原生JavaScript来实现复制到剪切板的功能，需要直接操作浏览器的剪切板API，这通常涉及到更复杂的操作，如使用document.execCommand('copy')方法，并且这种方法已经被现代浏览器弃用，...

			
		

	





	

		

			

				
					
js打开页面自动复制文本到剪贴板_浏览器剪贴板API的应用

				
			

			

				

					weixin_39780255的博客
				

				

					11-20
					
					1176
					
				

			

		

		

			
				
剪贴板在生产力平台上有很高的使用频率。剪贴板API在主流的浏览器上也已经有了不错的支持率。基于前端技术的生产力工具就需要考虑接入这些的能力。技术上可以实现的场景有：在onpaste事件读取剪贴板内容在oncopy事件中可以阻止默认行为、写入自定义数据到剪贴板……在onclick等事件中，可以用js程序执行剪贴板写入这些技术场景可以支持到的业务场景比如：word文本粘贴到页面（支持plain tex...

			
		

	





	

		

			

				
					
关于http协议运用剪贴板的兼容处理

				
			

			

				

					Alfie_1115的博客
				

				

					05-09
					
					724
					
				

			

		

		

			
				
react里面的HTML元素。

			
		

	





	

		

			

				
					
网页中实现一键复制到剪贴板

				
			

			

				

					roamingcode的博客
				

				

					08-22
					
					9126
					
				

			

		

		

			
				
html 代码



&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0

			
		

	





	

		

			

				
					
web开发中常常要实现“复制到剪切板”功能。这个功能很实用，但是由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限了。Firefox 默认下不能直接通过

				
			

			

				

					u013021074的博客
				

				

					04-29
					
					2611
					
				

			

		

		

			
				
web开发中常常要实现“复制到剪切板”功能。这个功能很实用，但是由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限了。Firefox 默认下不能直接通过Javascript操作剪切板，必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现，普遍流传的办法是_clipboard.swf，这是国外最早实现

			
		

	





	

		

			

				
					
网页上的点击按钮实现复制文本到剪切板

				
			

			

				

					trigger的博客
				

				

					07-13
					
					7601
					
				

			

		

		

			
				
一、原理分析浏览器提供了 copy 命令 ，可以复制选中的内容?1document.execCommand("copy")如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板但是 select() 方法只对 &lt;input&gt; 和 &lt;textarea&gt; 有效，对于 &lt;p&gt; 就不好使最后我的解决方案是，在页面...

			
		

	





	

		

			

				
					
html5图片剪切板,JavaScript 网页端复制图片到剪切板

				
			

			

				

					weixin_34908663的博客
				

				

					06-04
					
					602
					
				

			

		

		

			
				
前端页面可能需要复制图片到剪切板的功能，这里使用JavaScript来实现这一功能，兼容大部分浏览器全部代码复制图片到剪切板复制图片varSelectText=function(element){vardoc=document;if(doc.body.createTextRange){varrange=document.body.createTex...

			
		

	





	

		

			

				
					
网页新拷贝到剪切板和读取剪切板内容用法

				
			

			

				

					sinat_36572506的博客
				

				

					04-22
					
					803
					
				

			

		

		

			
				
async onClipboard() {// 这里是vue的函数定义,html可使用document调用
    if (navigator.clipboard && window.isSecureContext) {
// 这里需要注意，iOS中需要获取安全上下文(isSecureContext)例如：https安全密钥等
        try {
            // 拷贝到剪切版
            await navigator.clipboard.writeTex.

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
oscar999

			
送以玫瑰，手留余香

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值