From c29fa10b5bfa718db823188dc27bf0b71c06e015 Mon Sep 17 00:00:00 2001
From: 30secondsofcode <30secondsofcode@gmail.com>
Date: Mon, 20 Jan 2020 09:42:18 +0000
Subject: [PATCH] Travis build: 35

---
 blog_data/snippetList.json | 15 +++++++++++++++
 blog_data/snippets.json    | 25 +++++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/blog_data/snippetList.json b/blog_data/snippetList.json
index 8920cdfc6..8026be549 100644
--- a/blog_data/snippetList.json
+++ b/blog_data/snippetList.json
@@ -30,6 +30,21 @@
         "hash": "ebc2337246ca7925e763034b8f5718f6276afd9252856cad56eff5f6d6ba25f1"
       }
     },
+    {
+      "id": "copy-text-to-clipboard-with-javascript",
+      "type": "snippetListing",
+      "title": "How can I copy text to clipboard with JavaScript?",
+      "attributes": {
+        "text": "**Core functionality**\n\nA very common need when building websites is the ability to copy text to clipboard with a single button click. Javascript can easily do this in five short steps:hout the user selecting it or hitting the appropriate key combination on their keyboard. Javascript can easily do this in five short steps:\n\n1. Create a` <textarea>` element to be appended to the document. Set its value to the string that we want to copy to the clipboard.\n2. Append said `<textarea>` element to the current HTML document.\n3. Use `HTMLInputElement.select()` to select the contents of the `<textarea>` element.\n4. Use `Document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.\n5. Remove the `<textarea>` element from the document.\n\nThe simplest version of this method looks something like this:\n\n```js\nconst copyToClipboard = str => {\n  const el = document.createElement('textarea');\n  el.value = str;\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  document.body.removeChild(el);\n};\n```\n\nBear in mind that this method will not work everywhere, but only as a result of a user action (e.g. inside a `click` event listener), due to the way `Document.execCommand()` works.\n\n**Hide the appended element**\n\nThe above method, while functional, might have some issues such as flashing when appending and removing the `<textarea>`, a problem that is even more apparent when considering accessibility. A major improvement to this method comes from adding some CSS to make the element invisible and restrict editing by users:\n\n```js\nconst copyToClipboard = str => {\n  const el = document.createElement('textarea');\n  el.value = str;\n  el.setAttribute('readonly', '');\n  el.style.position = 'absolute';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  document.body.removeChild(el);\n};\n```\n\n**Save and restore the original document's selection**\n\nThe final consideration before wrapping this up is respecting the user's previous interaction with the website, like having already selected some content. Luckily, we can now use some modern Javascript methods and properties like `DocumentOrShadowRoot.getSelection()`, `Selection.rangeCount`, `Selection.getRangeAt()`, `Selection.removeAllRanges()` and `Selection.addRange()` to save and restore the original document selection. You can find the final code with these improvements implemented in the [copyToClipboard snippet](/js/s/copy-to-clipboard/).\n\n**Image credit:** [Kaitlyn Baker](https://unsplash.com/@kaitlynbaker?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
+        "tags": [
+          "javascript",
+          "browser"
+        ]
+      },
+      "meta": {
+        "hash": "9a5b35e84ff9b2b86e943e3a30d1f34cef1272fdf712a85d637d53c7fbd40cc5"
+      }
+    },
     {
       "id": "javascript-for-in-for-of-foreach",
       "type": "snippetListing",
diff --git a/blog_data/snippets.json b/blog_data/snippets.json
index 78bd46a6f..9ed58dd87 100644
--- a/blog_data/snippets.json
+++ b/blog_data/snippets.json
@@ -50,6 +50,31 @@
         "authorCount": 2
       }
     },
+    {
+      "id": "copy-text-to-clipboard-with-javascript",
+      "title": "How can I copy text to clipboard with JavaScript?",
+      "type": "blog.question",
+      "attributes": {
+        "fileName": "copy-text-to-clipboard-with-javascript.md",
+        "cover": "blog_images/copy-text-to-clipboard-with-javascript.jpg",
+        "excerpt": "Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.",
+        "authors": [
+          "chalarangelo"
+        ],
+        "text": "**Core functionality**\n\nA very common need when building websites is the ability to copy text to clipboard with a single button click. Javascript can easily do this in five short steps:hout the user selecting it or hitting the appropriate key combination on their keyboard. Javascript can easily do this in five short steps:\n\n1. Create a` <textarea>` element to be appended to the document. Set its value to the string that we want to copy to the clipboard.\n2. Append said `<textarea>` element to the current HTML document.\n3. Use `HTMLInputElement.select()` to select the contents of the `<textarea>` element.\n4. Use `Document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.\n5. Remove the `<textarea>` element from the document.\n\nThe simplest version of this method looks something like this:\n\n```js\nconst copyToClipboard = str => {\n  const el = document.createElement('textarea');\n  el.value = str;\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  document.body.removeChild(el);\n};\n```\n\nBear in mind that this method will not work everywhere, but only as a result of a user action (e.g. inside a `click` event listener), due to the way `Document.execCommand()` works.\n\n**Hide the appended element**\n\nThe above method, while functional, might have some issues such as flashing when appending and removing the `<textarea>`, a problem that is even more apparent when considering accessibility. A major improvement to this method comes from adding some CSS to make the element invisible and restrict editing by users:\n\n```js\nconst copyToClipboard = str => {\n  const el = document.createElement('textarea');\n  el.value = str;\n  el.setAttribute('readonly', '');\n  el.style.position = 'absolute';\n  el.style.left = '-9999px';\n  document.body.appendChild(el);\n  el.select();\n  document.execCommand('copy');\n  document.body.removeChild(el);\n};\n```\n\n**Save and restore the original document's selection**\n\nThe final consideration before wrapping this up is respecting the user's previous interaction with the website, like having already selected some content. Luckily, we can now use some modern Javascript methods and properties like `DocumentOrShadowRoot.getSelection()`, `Selection.rangeCount`, `Selection.getRangeAt()`, `Selection.removeAllRanges()` and `Selection.addRange()` to save and restore the original document selection. You can find the final code with these improvements implemented in the [copyToClipboard snippet](/js/s/copy-to-clipboard/).\n\n**Image credit:** [Kaitlyn Baker](https://unsplash.com/@kaitlynbaker?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
+        "tags": [
+          "javascript",
+          "browser"
+        ]
+      },
+      "meta": {
+        "hash": "9a5b35e84ff9b2b86e943e3a30d1f34cef1272fdf712a85d637d53c7fbd40cc5",
+        "firstSeen": "1579513283",
+        "lastUpdated": "1579513283",
+        "updateCount": 2,
+        "authorCount": 2
+      }
+    },
     {
       "id": "javascript-for-in-for-of-foreach",
       "title": "What is the difference between JavaScript's for...in, for...of and forEach?",