copy to clipboard

README.md

@@ -76,8 +76,20 @@ git submodule add https://git.seemsleg.it/ef/cssjs-func-lib cssjs
 ```
 <textarea style="max-height: 300px;" class="autoheight"></textarea>
 
-<script src='../dist/autosize.js'></script>
+<script src='/cssjs/autosize.js'></script>
 <script>
   autosize(document.querySelectorAll('textarea.autoheight'));
 </script>
+```
+
+## Copy to Clipboard
+```
+<script src='/cssjs/copy-to-clipboard.js'></script>
+<link rel="stylesheet" type="text/css" href="/cssjs/copy-to-clipboard.css">
+
+<input type="text" value="Hello World" id="copy-to-clipboard">
+<div class="copy-to-clipboard">
+          <input type="text" readonly="true" value="blablabla" id="copy-to-clipboard" onclick=" copyToClipboard();copiedToClipboard();return false;" onmouseout="resetClipboard()">
+            <span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
+          </div>
 ```

copy-to-clipboard.css

@@ -0,0 +1,35 @@
+.copy-to-clipboard {
+  position: relative;
+  display: inline-block;
+}
+
+.copy-to-clipboard .tooltiptext {
+  visibility: hidden;
+  width: 140px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -75px;
+}
+
+.copy-to-clipboard .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.copy-to-clipboard:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}

copy-to-clipboard.js

@@ -0,0 +1,20 @@
+function copyToClipboard() {
+  var copyText = document.getElementById("copy-to-clipboard");
+
+  /* Select the text field */
+  copyText.select();
+  copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+
+  /* Copy the text inside the text field */
+  document.execCommand("copy");
+}
+
+function copiedToClipboard() {
+  var tooltip = document.getElementById("copy-to-clipboard-tooltip");
+  tooltip.innerHTML = "Kopiert";
+}
+
+function resetClipboard() {
+  var tooltip = document.getElementById("copy-to-clipboard-tooltip");
+  tooltip.innerHTML = "Kopieren";
+}