JavaScript/Clipboard
Text can be copied to the clipboard in JavaScript using the navigator.clipboard.writeText method. However, to prevent unsolicited copying to clipboard, web browsers only allow it in response to a click or tap by the user.
In the following demonstration, a time stamp is generated, inserted into the text area, and then copied to the clipboard.
Source code
[edit | edit source]<!DOCTYPE html>
<html>
<head>
<title>Copying text to the clipboard in JavaScript</title>
<meta name="author" content="Elominius from Wikiversity">
<!-- the viewport meta tag magnifies the page on mobile browsers to make it useable there -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<style type="text/css">
/* modern font pack and dark theme */
body {
font-family: ubuntu,'noto sans','open sans', calibri, 'segoe ui', 'trebuchet ms', arial, helvetica, verdana, tahoma, 'Bitstream Vera Sans', 'sans-serif';
color: #ccc;
background-color: #222;
}
</style>
</head>
<body>
<p>Click on the button to generate a time stamp and copy the text from the text field. Try to paste the text afterwards in a different window using <kbd>Ctrl</kbd>+<kbd>V</kbd> on desktop or the clipboard menu on mobile devices, to see the effect.</p>
<input type="text" value="" id="input_field">
<button onclick="copy_to_clipboard();">Copy to clipboard</button>
<script>
// set variable that refers to the input field
var input_field = document.getElementById("input_field");
function generate_time_stamp() {
// fills the text area with time stamp; replacing colons with dashes to make it useable for file naming, since some operating systems like Windows do not support colons in file names.
// The replace() method isused twice instead of replaceAll() for browser compatibility.
return (new Date).toISOString().replace(":","-").replace(":","-");
}
// pre-fill field
input_field.value=generate_time_stamp();
function copy_to_clipboard() {
input_field.value=generate_time_stamp();
// select the text in the field
input_field.select();
input_field.setSelectionRange(0, 99999); // might be necessary on some mobile web browsers
// copy the text from the text box to the clipboard
navigator.clipboard.writeText(input_field.value);
// alert the copied text for confirmation
alert("Copied to clipboard: " + input_field.value);
}
</script>
</body>
</html>