pub/cssjs-func-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

copy to clipboard

Browse Source
This commit is contained in:
home 2020-06-09 22:28:19 +02:00
parent 6c84a89889
commit 99796b95e3
3 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -76,8 +76,20 @@ git submodule add https://git.seemsleg.it/ef/cssjs-func-lib cssjs
``` ```
<textarea style="max-height: 300px;" class="autoheight"></textarea> <textarea style="max-height: 300px;" class="autoheight"></textarea>
<script src='../dist/autosize.js'></script> <script src='/cssjs/autosize.js'></script>
<script> <script>
autosize(document.querySelectorAll('textarea.autoheight')); autosize(document.querySelectorAll('textarea.autoheight'));
</script> </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>
``` ```

35
copy-to-clipboard.css Normal file
View File

@ -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;
}

20
copy-to-clipboard.js Normal file
View File

@ -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";
}