Cách dán văn bản

Harry Theodoulou
Harry Theodoulou
Twitter Trang chủ

Phong cách hiện đại

Sử dụng API Bảng nhớ tạm không đồng bộ

Để đọc văn bản trong bảng nhớ tạm của người dùng theo phương thức lập trình, chẳng hạn như sau khi nhấp vào nút, bạn có thể sử dụng phương thức readText() của API Bảng nhớ tạm không đồng bộ. Nếu chưa cấp quyền đọc bảng nhớ tạm, thì lệnh gọi tới navigator.clipboard.readText() sẽ yêu cầu quyền đọc trong lần gọi đầu tiên vào phương thức này.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

Hỗ trợ trình duyệt

  • 66
  • 79
  • lần
  • 13,1

Nguồn

Cách cổ điển

Sử dụng document.execCommand()

Bằng cách sử dụng document.execCommand('paste'), bạn có thể dán nội dung trong bảng nhớ tạm tại điểm chèn (phần tử HTML hiện được lấy tiêu điểm). Phương thức execCommand trả về một giá trị boolean cho biết sự kiện paste có thành công hay không. Tuy nhiên, phương pháp này có một số hạn chế, chẳng hạn như vì nó đồng bộ, nên việc dán một lượng lớn dữ liệu có thể chặn trang.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1.3

Nguồn

Nâng cao dần dần

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

Tài liệu đọc thêm

Bản minh họa

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to paste text</title>
  </head>
  <body>
    <h1>How to paste text</h1>
    <p>
      <button type="button">Paste</button>
    </p>
    <textarea></textarea>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        const pasteButton = document.querySelector('button');

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText()
    document.querySelector('textarea').value += text;
    console.log('Text pasted.');
  } catch (error) {
    console.log('Failed to read clipboard. Using execCommand instead.');
    document.querySelector('textarea').focus();
    const result = document.execCommand('paste')
    console.log('document.execCommand result: ', result);
  }
});