时间戳

首页 > 解决方案 > 为什么我的“复制到剪贴板”按钮不起作用？

javascript - 为什么我的“复制到剪贴板”按钮不起作用？

问题描述

Web 编程的新手。我尝试重新创建一些网站，我想实现一个“复制到剪贴板”按钮，但它不起作用，我不知道为什么。我已经通过 Stackoverflow 进行了搜索，但我找不到这个问题的答案。

在此先感谢您的帮助！！

HTML：

<!DOCTYPE html>
  <html lang='en'>    
  <head>
    <meta charset='UTF-8'>
    <title>Portfolio Homepage</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="container">
      <div class="nav-wrapper">
        <div class="left-side">
          <div class="nav-link-wrapper">
            <a href="index.html">Home</a>
          </div>
  
          <div class="nav-link-wrapper active-nav-link">
            <a href="about.html">About</a>
          </div>
        </div>
        <div class="right-side">
          <div class="brand">
            ptp
          </div>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="two-column-wrapper">
          <div class="profile-image-wrapper">
            <img src="images/profile.jpg" alt="">
          </div>
          <div class="profile-content-wrapper">
            <h1>Managemt and Additional Information</h1>
            <p>This is a student's non-profit project made solemnly for practice and community   involvement. If you have any further inquiry about this project, please contact placeholdermail. </p>
            <p>Thank you very much!</p>
          </div>
        </div>
      </div>
    </div>
 </body>
</html>

JavaScript：

function copythis() {
   var copyText = document.getElementById("myInput");
   copyText.select(); 
   copyText.setSelectionRange(0, 99999); /*For mobile devices*/

   /* Copy the text inside the text field */
   document.execCommand("copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
}

标签： javascripthtml

解决方案

我看到您一直在尝试从W3school运行示例

现在，您的代码有什么问题：您没有定义myInputinHTML以便它可以从 HTML DOM 中获取文本。
下面是工作代码。

function myFunction() {
var copyText = document.getElementById("myInput");

copyText.select(); 
copyText.setSelectionRange(0, 99999); /*For mobile devices*/

/* Copy the text inside the text field */
document.execCommand("copy");

/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
<!DOCTYPE html>
<html lang='en'>
   <head>
      <meta charset='UTF-8'>
      <title>Portfolio Homepage</title>
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
      <link rel="stylesheet" href="styles.css">
   </head>
   <body>
      <div class="container">
         <div class="nav-wrapper">
            <div class="left-side">
               <div class="nav-link-wrapper">
                  <a href="index.html">Home</a>
               </div>
               <div class="nav-link-wrapper active-nav-link">
                  <a href="about.html">About</a>
               </div>
            </div>
            <div class="right-side">
               <div class="brand">
                  ptp
               </div>
            </div>
         </div>
         <div class="content-wrapper">
            <div class="two-column-wrapper">
               <div class="profile-image-wrapper">
                  <img src="images/profile.jpg" alt="">
               </div>
               <div class="profile-content-wrapper">
                  <h1>Managemt and Additional Information</h1>
                  <p>This is a student's non-profit project made solemnly for practice and community   involvement. If you have any further inquiry about this project, please contact placeholdermail.
                     <br>
                     <input type="text" value="Hello World" id="myInput">
                     <button onclick="myFunction()">Copy text</button>
                  </p>
                  <p>Thank you very much!</p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

推荐阅读