如何创建复制到剪贴板按钮？

在本文中，我们将讨论如何创建复制到剪贴板按钮。

在 Web 开发中有多种场景，我们必须为用户提供使用按钮将某些数据复制到剪贴板的功能。无论是代码示例还是用户自己的信息，我们都可以使用 navigator.clipboard.writeText()函数创建一个复制按钮将数据复制到剪贴板。此函数将作为参数提供给它的数据写入剪贴板。我们可以使用它来将任何文本复制到剪贴板。

首先，我们选择要复制到剪贴板的文本，无论它是来自 div 还是来自使用 document.getElementById() 或任何其他合适函数的输入框。然后我们将该文本的值存储在一个变量中，并将该变量作为参数传递给 navigator.clipboard.writeText()函数以将其复制到剪贴板。

句法：

navigator.clipboard.writeText(  )

在哪里

：确定要复制的字符串变量。

示例 1：这里我们添加了一个复制到剪贴板按钮到一个包含文本的 div，以将示例文本复制到剪贴板。

HTML

  

    
        body {
            margin: 100px;
        }
  
        #textbox {
            width: 40vw;
            height: 30vh;
            position: absolute;
            margin-left: 50px;
            margin-top: 20px;
        }
  
        button {
            width: 70px;
            height: 40px;
            margin-top: 120px;
            margin-left: 50px;
            background-color: green;
            color: white;
            border-radius: 10px;
            box-shadow: grey;
            position: absolute;
        }
  
        #sample {
            width: 70vw;
            margin: 50px;
            background-color: green;
            color: white;
            padding: 20px;
            font-size: x-large;
            position: absolute;
        }
  
        h1 {
            margin-left: 50px;
            margin-top: 160px;
        }
    

  

    
        Geeksforgeeks is best learning platform.
    
    
      
    Copy
    
      
    Copied Text:
    
      
    
        function copyText() {
      
            /* Copy text into clipboard */
            navigator.clipboard.writeText
                ("Geeksforgeeks is best learning platform.");
        }
    

  

输出：

输出

示例 2：在这里，我们从文本区域复制文本，用户可以在其中编写自己的文本，然后将其复制到剪贴板，并且该文本也显示在较低的波段上。

HTML

  

    
        #textbox {
            width: 70vw;
            height: 30vh;
        }
  
        button {
            width: 70px;
            height: 40px;
            background-color: green;
            color: white;
            border-radius: 10px;
            box-shadow: grey;
        }
  
        #clipboard {
            width: 70vw;
            margin: 50px;
            background-color: green;
            color: white;
            padding: 20px;
            font-size: x-large;
        }
    

  

    
        
        Copy
        
        Copied Text:
        NA
    
  
    
        function copyText() {
      
            /* Select text area by id*/
            var Text = document.getElementById("textbox");
  
            /* Select the text inside text area. */
            Text.select();
  
            /* Copy selected text into clipboard */
            navigator.clipboard.writeText(Text.value);
  
            /* Set the copied text as text for 
            div with id clipboard */
            document.getElementById("clipboard")
                .innerHTML = Text.value;
        }
    

  

输出：

输出