<div class="wrapper">
    <div class="text-box">复制这段文字吧</div>
    <button class="copy">复制上面的文字</button>
    <textarea class="test" placeholder="粘贴到这儿试试"></textarea>
  </div>
*{
      margin: 0;
      padding: 0;
    }
    .wrapper{
      width: 500px;
      height: 300px;
      margin: 70px auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #eee;
    }
    .test{
      width: 200px;
      height: 50px;
      display: block;
    }
const btn = document.querySelector('.copy')
    const textBox = document.querySelector('.text-box')

    btn.addEventListener('click', function() {
      const text = textBox.innerText
      // 方法 1
      // const input = document.createElement('input')
      // input.setAttribute('value', text)
      // document.body.appendChild(input)
      // input.select()
      // document.execCommand('copy')
      // document.body.removeChild(input)
      // 方法 2
      let copyPromise = navigator.clipboard.writeText(text)
      copyPromise.then(() => console.log('复制大成功')).catch(() => console.log('复制大失败'))
    })
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.