Forum Academy Marketplace Showcase Pricing Features

Copy to clipboard

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.

4 Likes

This works very nicely - just not for copying HTML :frowning:

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?

1 Like