JavaScript/Clipboard
Jump to navigation
Jump to search
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>