Hello! Is it possible to add a button in my app that to copy to the clipboard specified text?
No, but users right clicking (or using shortcuts) can use clipboard functions. Generally speaking, you donât want to overwrite the OSâs natives functionality if you donât have to.
Currently most browsers utilize the JS command document.execCommand('copy');
You can achieve a copy paste button of a url (for example) by using an html block inside of Bubble and the following code (there is some CSS thrown in there for animation effect):
<style type="text/css">
body {
font-family: sans-serif;
font-size: 1em;
color: #333;
background-color: #ddd;
}
label {
clear: both;
display: block;
font-size: 0.85em;
font-weight: bold;
padding: 0.8em 0 0.2em 0;
user-select: none;
}
input, button {
float: left;
font-size: 1em;
padding: 3px 6px;
margin: 0;
border: 1px solid #333;
outline: 0;
box-shadow: none;
}
::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
width: 15em;
background-color: #fff;
border-right: 0 none;
border-radius: 3px 0 0 3px;
}
button {
position: relative;
background-color: #aaa;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.copied::after {
position: absolute;
top: 12%;
right: 110%;
display: block;
content: "copied";
font-size: 0.75em;
padding: 2px 3px;
color: #fff;
background-color: #22a;
border-radius: 3px;
opacity: 0;
will-change: opacity, transform;
animation: showcopied 1.5s ease;
}
@keyframes showcopied {
0% {
opacity: 0;
transform: translateX(100%);
}
70% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
}
}
</style>
<input type="text" id="website" value=âwww.example.comâ />
<button data-copytarget="#website">copy</button>
<script>
(function() {
'use strict';
// click events
document.body.addEventListener('click', copy, true);
// event handler
function copy(e) {
// find target element
var
t = e.target,
c = t.dataset.copytarget,
inp = (c ? document.querySelector(c) : null);
// is element selectable?
if (inp && inp.select) {
// select text
inp.select();
try {
// copy text
document.execCommand('copy');
inp.blur();
// copied animation
t.classList.add('copied');
setTimeout(function() { t.classList.remove('copied'); }, 1500);
}
catch (err) {
alert('please press Ctrl/Cmd+C to copy');
}
}
}
})();
</script>
Everything works using the above, you can even swap www.example.com with dynamic data. However, when I put this code inside of a repeating group, we need to change âwebsiteâ inside of the [id=âwebsiteâ] and the [data-copytarget=â#websiteâ] to a unique number. I generated a unique number for every row, but when I insert itâŚthe copy button no longer works.
Why does it fail when swapping the variable with dynamic data (i.e. the cellâs index)? The idea here is to âget aroundâ the global variable issue by creating a unique number so that each cell in the repeating group will be able to copy that cellâs email. Else, it would just copy the first cellâs email because the global variable in the javascript code would just carry down.
This works very nicely - just not for copying HTML
Thanks, that works nicely.
One weird thing is that the animation stopped playing at some point. I donât think I did anything to change that part of the code.
Guys, does any one succeeded with this topic?
How can we add copy to clipboard button something in repeating cell?