![\"\"](\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/copying_text_to_clipboard-1.jpg?resize=678%2C254\")
<\/p>\n<\/p>\n
This post describes how you can copy text to your clipboard with JavaScript.<\/p>\n
<\/p>\n
If you know there is something your user will want to copy giving them an easy way can to do this can be very helpful. This is even more important when users might be on tablet or other mobile devices which selecting text is harder than using a desktop computer.<\/p>\n
Adding to this, this feature has wider reaching accessibility uses as it means those using a screenreader or clicker to operate the browser can copy the text. Users using these devices are easily able to press buttons and navigate however selecting text is a lot tricker and in some cases impossible. Therefore adding a small button to copy the text can improve the lives of your user significantly.<\/p>\n
However you need to make it clear what the button will do.\u00a0Adding data to a users clipboard can cause frustration if it was not clear that it would occur. There may be instances where they have something important there and do not want to copy your text.<\/p>\n
It is generally accepted that you should only add data to the clipboard if they have actively initiated it, such as by pressing a button.<\/p>\n
The main copying is done by the below function.<\/p>\n
function copyText(text) {\r\n var ta = document.createElement("textarea");\r\n ta.value = text;\r\n ta.style.position = 'absolute';\r\n ta.style.left = "-999999999px";\r\n document.body.appendChild(ta);\r\n ta.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(ta);\r\n}<\/pre>\nFirst a text area element is created and the value is set to the text we want to copy. Once created we set its positioning style elements so that once it is added to the page it will not be visible. Finally we append it to the body of the document.<\/p>\n
Once the element is in the document we can select the content of the box\u00a0using .select()<\/code>.\u00a0This acts as if the user has selected the content using their mouse. Once we have done this we can use execCommand<\/code> to perform the copy.<\/p>\nOnce this has been called we can remove the element from the page as the text has been copied.<\/p>\n
Using this simple function we can allow copying of data to the clipboard to help the user of the website.<\/p>\n","protected":false},"excerpt":{"rendered":"
This post describes how you can copy text to your clipboard with JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":1213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Improving #Accessibility on the #Web by giving users the ability to copy to clipboard with #JavaScript #a11y","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[98],"tags":[264,265,72,266],"class_list":["post-1184","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-a11y","tag-accessibility","tag-javascript","tag-web"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/copying_text_to_clipboard.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-j6","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":157,"url":"https:\/\/chewett.co.uk\/blog\/157\/selection-click-and-drag-doesnt-work-in-gmail-opera\/","url_meta":{"origin":1184,"position":0},"title":"Selection\/Click and drag doesnt work in Gmail – Opera","author":"Chewett","date":"September 27, 2013","format":false,"excerpt":"In opera normally click and drag or selection doesn't work. This is because in opera Gmail serves up some CSS that breaks the display and stops you clicking and dragging text. To fix this, you can enable opera's list of JavaScript changes, to make popular sites work. This is done\u2026","rel":"","context":"In "Fixes"","block_context":{"text":"Fixes","link":"https:\/\/chewett.co.uk\/blog\/category\/fixes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1166,"url":"https:\/\/chewett.co.uk\/blog\/1166\/better-positioning-of-text-using-measuretext-with-html5-canvas\/","url_meta":{"origin":1184,"position":1},"title":"Better positioning of text using measureText with HTML5 Canvas","author":"Chewett","date":"May 5, 2018","format":false,"excerpt":"In this tutorial I am extending the previous animation example by better positioning the text using measureText with the HTML5 canvas. The problem with positioning text When positioning\u00a0text you will sometimes want to know the width and height so that you can centre it on the canvas. However this isn't\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":667,"url":"https:\/\/chewett.co.uk\/blog\/667\/html5-canvas-drawing-tutorial-basic-shapes\/","url_meta":{"origin":1184,"position":2},"title":"HTML5 Canvas Drawing Tutorial – Basic Shapes","author":"Chewett","date":"September 27, 2017","format":false,"excerpt":"This post is the first in a series of blog posts where I explore the HTML5 canvas. This first tutorial looks at creating the basic elements required to draw on a canvas and drawing some basic shapes. Creating and styling the canvas The first step to creating an HTML5 canvas\u2026","rel":"","context":"In "Informational"","block_context":{"text":"Informational","link":"https:\/\/chewett.co.uk\/blog\/category\/informational\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":613,"url":"https:\/\/chewett.co.uk\/blog\/613\/backup-raspberry-pi-rsync\/","url_meta":{"origin":1184,"position":3},"title":"Backup a Raspberry Pi with Rsync","author":"Chewett","date":"December 20, 2017","format":false,"excerpt":"I am going to upgrade our previous Raspberry Pi backup script that previously used Secure Copy to one that uses rsync. The primary reason for this is that rsync will only copy new or changed files over. This post goes through the reasons why you might want to use rsync\u00a0instead\u2026","rel":"","context":"In "Raspberry Pi Cluster"","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/12\/rsync_backup_raspberry_pi.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/12\/rsync_backup_raspberry_pi.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/12\/rsync_backup_raspberry_pi.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/12\/rsync_backup_raspberry_pi.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":1184,"position":4},"title":"Drawing shapes in D3.js Version 5","author":"Chewett","date":"September 5, 2018","format":false,"excerpt":"This post goes over the various D3.js symbols typically used for scatter plots. D3.js built-in symbols D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are\u00a0for points on scatter plots and similar graphs. It is important to\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2734,"url":"https:\/\/chewett.co.uk\/blog\/2734\/rsync-entire-raspberry-pi-to-windows\/","url_meta":{"origin":1184,"position":5},"title":"Rsync Entire Raspberry Pi to Windows","author":"Chewett","date":"November 21, 2020","format":false,"excerpt":"This post includes a short snippet to copy your entire Raspberry Pi filesystem to Windows using Rsync. Copying and Archiving particular directories If you want to rsync specific directories rather than the entire Raspberry Pi I suggest you read my previous blog post. It details how to backup a Raspberry\u2026","rel":"","context":"In "Raspberry Pi Cluster"","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/11\/raspberrypi_rsync_posticon_OUTPUT.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/11\/raspberrypi_rsync_posticon_OUTPUT.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/11\/raspberrypi_rsync_posticon_OUTPUT.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/11\/raspberrypi_rsync_posticon_OUTPUT.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2020\/11\/raspberrypi_rsync_posticon_OUTPUT.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=1184"}],"version-history":[{"count":4,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1184\/revisions"}],"predecessor-version":[{"id":1215,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1184\/revisions\/1215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1213"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}