使用JavaScript读取所选文本并将其复制到剪贴板(2)-CSDN博客

将所选文本复制到用户剪贴板

好了，既然如何阅读页面上所选内容的细节，无论是在一般的页面上，还是在特定的DIV或表单元素内，我们都可以继续下一个紧迫的问题，实际上是复制那个内容到剪贴板。正如在本教程开始时所提到的，它归结为使用该方法执行命令以将文本“复制”（或“剪切”）到剪贴板： document.execCommand()

 
          function  
          copySelectionText(){<font></font>  
        
          var  
          copysuccess  
          // var to check whether execCommand successfully executed<font></font>  
        
          try  
          {<font></font>  
        
          copysuccess = document.execCommand(  
          "copy"  
          )  
          // run command to copy selected text to clipboard<font></font>  
        
          }  
          catch  
          (e){<font></font>  
        
          copysuccess =  
          false  
          <font></font>  
        
          }<font></font>  
        
          return  
          copysuccess<font></font>  
        
          }

这里的关键是行 document.execCommand("copy") ，它实际上执行动作以将页面上当前选择的任何内容复制到剪贴板。为了检测浏览器是否 execCommand() 正确支持该方法，我们将操作放在一个 try/catch() 块中; 如果调用 execCommand() 失败，我们知道浏览器不支持此方法。

我们可以使用我们的新变形 copySelectionText() 函数和任何以前的方法来选择/检索一些文本然后将其复制到剪贴板。例如，当用户将鼠标悬停在文档上时，下面的代码段会复制用户在页面上选择的任何内容：

 
          document.body.addEventListener(  
          'mouseup'  
          ,  
          function  
          (){<font></font>  
        
          var  
          copysuccess = copySelectionText()  
          // copy user selected text to clipboard<font></font>  
        
          },  
          false  
          )

我们可以改进这个过程，但如果用户选择实际上包含一些数据，则只执行“复制”操作; 例如，如果用户只是单击页面而不突出显示任何内容，则不会选择任何数据，在这种情况下，应该中止复制操作。这可以通过预先查看用户选择的内容来完成：

 
          document.body.addEventListener(  
          'mouseup'  
          ,  
          function  
          (){<font></font>  
        
          var  
          selected = getSelectionText()  
          // call <a href="#getselectiontext">getSelectionText()</a> to see what was selected<font></font>  
        
          if  
          (selected.length > 0){  
          // if selected text length is greater than 0<font></font>  
        
          var  
          copysuccess = copySelectionText()  
          // copy user selected text to clipboard<font></font>  
        
          }<font></font>  
        
          },  
          false  
          )

现在是现场演示的时候了。尝试选择以下段落中的任何文本，以查看其内容复制到剪贴板（之后按“Ctrl V”进行粘贴和确认）。我还添加了一个临时显示的工具提示，表示每次成功：

演示（选择下面段落中的任何文本将其复制到剪贴板）：

“为了享受健康，为家庭带来真正的幸福，为所有人带来和平，首先必须训练和控制自己的思想。如果一个人可以控制自己的思想，他就能找到通往启蒙的道路，以及所有的智慧和美德他自然会来找他。“ -佛

代码：

 
          createtooltip()  
          // create tooltip by calling it ONCE per page. See "Note" below<font></font>  
        
          var  
          buddhaquote = document.getElementById(  
          'buddhaquote'  
          )<font></font>  
        
          buddhaquote.addEventListener(  
          'mouseup'  
          ,  
          function  
          (e){<font></font>  
        
          var  
          selected = getSelectionText()  
          // call getSelectionText() to see what was selected<font></font>  
        
          if  
          (selected.length > 0){  
          // if selected text length is greater than 0<font></font>  
        
          var  
          copysuccess = copySelectionText()  
          // copy user selected text to clipboard<font></font>  
        
          showtooltip(e)<font></font>  
        
          }<font></font>  
        
          },  
          false  
          )