Dapatkan konten papan klip saat ini? [Tutup]


107

Saya ingin mengetahui cara agar skrip saya mendeteksi konten papan klip dan menempelkannya ke dalam bidang teks saat halaman dibuka, tanpa masukan dari pengguna. Bagaimana caranya?


Anda tidak dapat benar-benar mengetahui apa yang ada di papan klip pengguna kecuali Anda menggunakan semacam flash backend saat mereka menyalin teks. ------- Pembaruan: Jawaban yang lebih benar di sini
Naftali alias Neal



Jawaban:


73

window.clipboardData.getData('Text')akan berfungsi di beberapa browser. Namun, banyak browser yang berfungsi akan meminta pengguna, apakah mereka ingin halaman web memiliki akses ke clipboard atau tidak.


17
Apakah ini akan berfungsi di browser apa pun selain Internet Explorer?
Anderson Green

6
Mungkin tidak. Lihat pertanyaan ini: stackoverflow.com/questions/400212/…
Dave

7
Anda dapat memeriksa kompatibilitasnya di sini caniuse.com/#search=clipboardData
Sergey Novikov

1
Solusi yang lebih baik didapatkan dengan objek node, tetapi tidak dengan objek jendela. Lihat di sini
rplaurindo

Saya khawatir tentang Keepass dan keamanannya. Aplikasi ini memungkinkan saya menyalin kata sandi saya ke clipboard.
René Winkler

69

Gunakan API papan klip baru , melalui navigator.clipboard. Ini bisa digunakan seperti ini:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Atau dengan sintaks asinkron:

const text = await navigator.clipboard.readText();

Perlu diingat bahwa ini akan meminta pengguna dengan kotak dialog permintaan izin, jadi tidak ada bisnis lucu yang mungkin terjadi.

Kode di atas tidak akan berfungsi jika dipanggil dari konsol. Ini hanya berfungsi ketika Anda menjalankan kode di tab aktif. Untuk menjalankan kode dari konsol Anda, Anda dapat menyetel waktu tunggu dan mengklik di jendela situs web dengan cepat:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Baca lebih lanjut tentang API dan penggunaan di dokumen pengembang Google .

Spesifikasi


18
Perhatikan bahwa itu selalu menghasilkan kesalahan saat dipanggil dari konsol. Tapi itu tidak bekerja pada tindakan pengguna langsung, seperti ketika Anda menekan tombol pada halaman.
Klesun

ini tampaknya hanya mengembalikan teks biasa ... meskipun teks kaya ada di papan klip. bagaimana saya bisa mendapatkannya? \
Michael

@Michael, dukungan untuk gambar dan lainnya baru saja ditambahkan di versi Chrome terakhir (76)
iuliu.net

Anda dapat menguji di konsol dengan memasukkan a setTimeout, lalu mengklik kembali halaman tersebut.
edbentley

18

Kamu bisa memakai

window.clipboardData.getData('Text')

untuk mendapatkan konten papan klip pengguna di IE. Namun, di browser lain Anda mungkin perlu menggunakan flash untuk mendapatkan konten, karena tidak ada antarmuka standar untuk mengakses clipboard. Mungkin Anda sudah bisa mencoba plugin Zero Clipboard ini


1
tautan berfungsi dengan baik (lagi)
stephanos

5
ZeroClipboard hanya memungkinkan Anda untuk menyalin ke clipboard, tidak membaca dari itu.
DSimon

4

Mengikuti akan memberi Anda konten yang dipilih serta memperbarui clipboard.

Ikat id elemen dengan event copy dan kemudian dapatkan teks yang dipilih. Anda dapat mengganti atau mengubah teks. Dapatkan clipboard dan atur teks baru. Untuk mendapatkan pemformatan yang tepat, Anda perlu menyetel jenisnya sebagai "teks / hmtl". Anda juga dapat mengikatnya ke dokumen alih-alih elemen.

document.querySelector('element').bind('copy', function(event) {
  var selectedText = window.getSelection().toString(); 
  selectedText = selectedText.replace(/\u200B/g, "");

  clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
  clipboardData.setData('text/html', selectedText);

  event.preventDefault();
});

21
Selamat datang di situs ini! Saya senang Anda berkontribusi dengan menjawab sebuah pertanyaan. Namun perlu diketahui bahwa jawaban Anda tidak benar-benar menjawab pertanyaan OP. Pertanyaannya adalah mengambil konten dari clipboard dan menempelkannya di suatu tempat saat membuka halaman. Selain itu, karena pertanyaan tidak memiliki tag jquery , jawaban dengan jQuery harus berisi catatan bahwa perpustakaan (jQuery) digunakan.
KarelG
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.