Skip to main content

Copy to clipboard using HTML, CSS and JavaScript

output preview

 <html>

<head>

<title>COPY TO CLIPBOARD</title>

<style>

table{

  margin:0 auto;

  width: 500px;

  margin-top: 100px;

}

td{

  padding-bottom: 50px;

}

.title{

  font-weight: bold;

  font-family: calibri;

  font-size: 42px;

  color: #fff;

  text-shadow: 2px 2px 20px black;

}

.note{

  font-size: 20px;

  font-family: Arial;

}

#key{

  width:330px;

  padding: 5px;

  border:solid 2px navy;

  border-radius: 5px;

  text-align: center;

  font-family: Arial;

  font-size: 24px;

  background-color: #fff;

}

#txt{

  width:480px; height:200px;

  border: solid 2px navy;

  border-radius: 5px;

  padding: 10px;

  text-align: center;

  font-family: calibri;

  font-size: 26px;

}

#btn, #gen{

  font-family: calibri;

  font-size: 18px;

  font-weight: bold;

  border:none;

  color:#fff;

  border-radius: 5px;

  padding: 10px;

}

#gen{

  width: 480px;

  background-color: navy;

}

#btn{

  width: 150px;

  background-color: navy;

}

</style>

</head>


<body>

   <table>

     <tr>

       <td align="center">

         <font class="title">KEYGEN 2021</font>

       </td>

     </tr>

     

     <tr>

       <td align="center">

         <p>

           <input type="text" id="key"/> <input type="button" value=" COPY " onClick="cp()" id="btn"/>

         </p>

         <p>

           <input type="button" value="GENERATE KEY" onClick="gen()" id="gen"/>

         </p>

       </td>

     </tr>

     

     <tr>

       <td align="center">

         <input type="text" id="txt" placeholder="<-- paste here to confirm -->"/>

       </td>

     </tr>

     

     <tr>

       <td align="justify">

         <font class="note"><b>Note:</b> To generate your serial key/number, click on the genetate button and click copy. Paste it in the empty field to confirm you have successfully copied your serial key/number.</font>

       </td>

     </tr>

   </table>

   

  <script type="text/javascript">

    function gen(){

      let key = document.getElementById('key');

      key.value = '1238 - 8947 - 7367';

    }

    

    function cp(){

      var copyTxt = document.getElementById('key');

      copyTxt.select();

      copyTxt.setSelectionRange(0, 99999);

      document.execCommand("copy");

      alert(" ' " + copyTxt.value + " ' " + " is successfully copied!");

    }

  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Progress Bar with percentage

 <html>     <head>         <title>ProgressBar</title>     </head>     <style>     #bg{         position: absolute;         top:0; left:0;         width: 100%; height: 100%;         padding-top: 45%;     }     #pbg{         width:400px;         padding:5px;         border-radius:10px;         background-color: #fff;         border:solid 2px green;     }     #pb{         height:30px;         background-color: green;         text-align: center;         font-size: 18px;         font-weight: bold;         padding-top: 7px;         font-fam...

Print a webpage using javascript

Print a webpage using javascript Creating a simple Html button using as a print button whereby it prints current webpage. This action goes to javascript.  With this simple method, it is supported by all browsers including chrome, Firefox, explorer and opera. This method is called window print() method. Example Print the current page: window.print(); Definition and Usage The print() method prints the contents of the current window. The print() method opens the Print Dialog Box, which lets the user to select preferred printing options. With this, I'll demostrate to you an example as seen below. <button onlick="window.print();">Print</button> #js #printbutton #javascript #javascript_print_button