<!DOCTYPE html>

<html>

  <head>

    <title>Thông tin tài khoản</title>

    <style>

      body {

        background-color: #1E90FF;

      }

      .account-info {

        background-color: white;

        border: 1px solid black;

        padding: 10px;

        margin-bottom: 10px;

      }

      .account-info h2 {

        margin-top: 0;

      }

      .account-info p {

        margin: 0;

        padding: 5px;

        border: 1px solid black;

      }

      .copy-button {

        margin-left: 10px;

      }

    </style>

  </head>

  <body>

    <div class="account-info" data-account="vu2003@gmail.com" data-password="khang1247">

      <h2>Tài khoản </h2>

      <p class="account">vu2003@gmail.com</p>

      <p class="password">khang1247</p>

      <button class="copy-button">Sao chép</button>

    </div>

    <script>

      document.addEventListener('click', event => {

        if (event.target.matches('.copy-button')) {

          const button = event.target;

          const account = button.parentElement.querySelector('.account').textContent;

          const password = button.parentElement.querySelector('.password').textContent;

          const accountInfo = `Tài khoản: ${account}\nMật khẩu: ${password}`;

          navigator.clipboard.writeText(accountInfo);

          alert("Đã sao chép thông tin!");

        }

      });

    </script>

  </body>

</html>

Nhận xét

Đăng nhận xét