Salin teks JavaScript ke clipboard

Programming

oleh Vinci terakhir diubah pada 9 September 2022.

Ini adalah contoh skrip dalam JavaScript untuk menyalin teks ke clipboard sistem. Saya menyajikan tiga metode berbeda dalam tutorial ini.

  1. Melalui API ClipBoard.
  2. Menggunakan document.executeCommand (tidak disarankan).
  3. Dengan persetujuan pengguna

Contoh JS cepat ini menggunakan cara pertama dan terbaik untuk menyalin konten area teks ke clipboard.

Contoh cepat

var contentToCopy = document.getElementById(text_to_copy).value;
navigator.clipboard.writeText(contentToCopy).then(function() {
	console.log('Copied to clipboard with async.');
}, function(err) {
	console.error('Unable to copy with async ', err);
});

Elemen textarea HTML tempat konten disalin oleh skrip JS.

<textarea id="text_to_copy">Text to copy</textarea>

Papan klip salin JavaScript

1) Menggunakan Clipboard API

Skrip HTML berikut menyediakan antarmuka dengan area teks dan tombol untuk mengaktifkan tindakan salin.

Klik tombol untuk memanggil JavaScript menyalin ke clipboard() Fungsi. Fungsi ini memindahkan konten area teks ke clipboard.

index.html

<html>
<head>
<title>JavaScript Copy Text to Clipboard</title>
<script src="https://phppot.com/javascript/javascript-copy-clipboard/copy-clipboard-async.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>JavaScript Copy Text to Clipboard</h1>
        <div class="row">
            <div class="message-input">
                <label for="message-input">Message: </label>
                <textarea id="message-input" rows="15"
                    name="message-input" class="message-input"></textarea>
            </div>
        </div>
        <div class="row">
            <button onclick="copyToClipboard('message-input')"
                type="button">Copy to clipboard</button>
        </div>
        <div class="row">
            <div id="copied"></div>
        </div>
    </div>
</body>
</html>

Skrip JS ini menulis teks ke clipboard dengan memanggil clipboard.writeText(). Ini meningkatkan contoh cepat ini dengan menyediakan antarmuka untuk menyalin konten melalui ClipBoard API.

salin-clipboard-async.js

/**
 * to copy to the clipboard using the Clipboard API
 * 
 * @param element
 * @returns
 */
function copyToClipboard(element) {
	var contentToCopy = document.getElementById(element).value;
	navigator.clipboard.writeText(contentToCopy).then(function() {
		console.log('Copied to clipboard with async.');
	}, function(err) {
		console.error('Unable to copy with async ', err);
	});
}

2) document.execCommand

Metode ini banyak digunakan untuk menyalin konten dengan memanggil executeCommand(“copy”). Itu sudah usang tetapi masih didukung oleh banyak browser.

Ini secara dinamis menambahkan elemen textarea ke badan HTML dan memilih kontennya menggunakan JavaScript. Kemudian memanggil fungsi executeCommand() memulai tindakan salin.

copy-clipboard-execommand.js

/**
 * to copy to the clipboard using the document.execCommand
 * 
 * @param element
 * @returns
 */
function copyToClipboard(element) {
	var contentToCopy = document.getElementById(element).value;
	var temp = $("<textarea>");
	$("body").append($temp);
	temp.val(contentToCopy);
	temp.select();
	document.execCommand("copy");
	temp.remove();
	console.log('Copied!');
}

3) Salin oleh pengguna

Ini adalah cara teraman untuk menyalin konten ke clipboard. Itu tidak menggunakan fungsi JavaScript asli dan dapat digambarkan sebagai lebih dari sebuah proses. Meminta pengguna untuk mengonfirmasi salinan konten yang dipilih ke papan klip.

copy-by-user-consent.html

<html>
<head>
<title>JavaScript Copy Text to Clipboard</title>
</head>
<body>
    <!-- In this style, we present the control to the end user to copy.  -->
    <!-- Text to be copied is shown to the user and he uses the built-in browser's feature and copies to the clipboard. -->
    <!-- If this is possible to use in your use case, then this is the safest method. -->
    <button id="copy-btn"
        onclick="copyToClipboard(document.getElementById('copy-btn').innerHTML)">Text
        to copy.</button>
    <script>
		function copyToClipboard(text) {
			window.prompt("Press Ctrl+C to copy to clipboard.",
					text);
		}
	</script>
</body>
</html>

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.