Copy text to clipboard button

API & Customization Show & Tell
1

Someone mentioned this and thought it’d be a really cool little add on. This code is to add a button to copy text for your customers and can be linked to any field in a details section.

Screenshot 2023-05-10 at 22.00.53

You just need to add the view and field number

Javascript

$(document).on('knack-view-render.view_22', function() {
  var $button = $('<button class="copyText">Copy</button>');
  $('.field_10 .kn-detail-body').prepend($button);
  
  $button.click(function() {
    var $input = $('<input>');
    var copiedText = $('.field_10 .kn-detail-body span').text();
    
    $input.val(copiedText);
    $('body').append($input);
    $input.select();
    
    document.execCommand('copy');
    
    $input.remove();
    $button.html('Copied ✅');
  });
});

CSS

.copyText {
  margin:10px 0px!important;
  background:rgb(33, 136, 214);
  color:white;
  font-weight: bold;
  border-radius:.6em;
  padding:5px 7px;
  border:none!important;
  cursor:pointer;
}

Any questions just leave them below

5 Likes
2

Brilliant, thank you!

2 Likes
3

Great! But how I can find these view and field numbers?

4

Nevermind, I’ve managed to find the numbers. However, the code copies the CSS code and not the text in the field.

5

@Bruno have you added the correct field number? can you show me your code

1 Like
6

Thanks John! It works really well.

Can I change the word copy by a icon?

7

Hi Johnny, the code is running but a curious thing happens: instead of just “ABC” it copies “ABCABCABC”, i.e. the text 3x (!)

The javascript for this app is:

// ---- This fixes the issue with some Squarespace templates ignoring clicks on some links ----

$(document).on(‘knack-page-render.any’, function(event, page) {
if ($(‘html’).hasClass(‘squarespace-damask’)) {
$(‘.kn-content a’).not(‘[href^=“http”],[href^=“https”],[href^=“mailto:”]’).each(function() { $(this).attr(‘href’, function(index, value) { if (value && value.length > 0 && value.substr(0,1) !== “/”) {
return (window.location.protocol + ‘//’ + window.location.host + window.location.pathname + value); }}); }); } });

// ---- Insert copy to clipboard button ----

$(document).on(‘knack-view-render.view_62’, function() {
var $button = $(‘Copy’);
$(‘.field_107 .kn-detail-body’).prepend($button);

$button.click(function() {
var $input = $(‘’);
var copiedText = $(‘.field_107 .kn-detail-body span’).text();

$input.val(copiedText);
$('body').append($input);
$input.select();

document.execCommand('copy');

$input.remove();
$button.html('Copied ✅');

});
});

Thanks

Bruno

8

Here could be the fix @Bruno

change this
var copiedText = $(‘.field_107 .kn-detail-body span’).text();
to this adding :last-child
var copiedText = $(‘.field_107 .kn-detail-body span:last-child’).text();

Knack has had this issue for years a where updates to the field create duplicate span tags for the field

9

Thanks Johnny, but the problem persists… -Bruno

10

Curiously, execCommand is automatically crossed out in the code…

11

Hi @Bruno

I guess the code you copied in latest reply is the code you still can’t get to work. It doesn’t show the line I suggested you update from my last reply adding ‘:last-child’

var copiedText = $(‘.field_107 .kn-detail-body span:last-child’).text();

I think this is why

12

Ops, my mistake. This is the corrected code, and it`s unfortunately not working:

$(document).on(‘knack-view-render.view_62’, function() {
var $button = $(‘Copy’);
$(‘.field_107 .kn-detail-body’).prepend($button);

$button.click(function() {
var $input = $(‘’);
var copiedText = $(‘.field_107 .kn-detail-body span:last-child’).text();

$input.val(copiedText);
$('body').append($input);
$input.select();

document.execCommand('copy');

$input.remove();
$button.html('Copied ✅');

});
});

13

@bruno Had run up a brand new app and copied the code original code and it works fine. I copied your code here and it came up with loads of errors this is because this normal text uses “smart quotes” (‘’ ) rather than regular single quotes ('') needed for code. When you put the code in your posts half of it was normal text and the other half in quotes code, I wonder if you copied this back in then added the changes ie ‘:last-child’ but it still couldn’t read your code based on the text format issue as above.

I get your point about document.execCommand(‘copy’); this is because it’s being phased out so have improved the code. I have added in your field numbers so just copy this code below.

$(document).on('knack-view-render.view_62', function() {
  var $button = $('<button class="copyText">Copy</button>');
  $('.field_107 .kn-detail-body').prepend($button);
  
  $button.click(function() {
    var copiedText = $('.field_107 .kn-detail-body span:last-child').text();
    
    navigator.clipboard.writeText(copiedText).then(function() {
      $button.html('Copied ✅');
    }, function(err) {
      console.error('Failed to copy text: ', err);
    });
  });
});

You

14

Thanks for the effort Johnny, but it is still not working. Please check the pasted copy below regarding quotes, chatgpt says it’s ok hehehe

$(document).on(‘knack-view-render.view_62’, function() {
var $button = $(‘Copy’);
$(‘.field_107 .kn-detail-body’).prepend($button);

$button.click(function() {
var copiedText = $(‘.field_107 .kn-detail-body span:last-child’).text();

navigator.clipboard.writeText(copiedText).then(function() {
  $button.html('Copied ✅');
}, function(err) {
  console.error('Failed to copy text: ', err);
});

});
});

15

I will post my screen, hope this helps. I’m having a hardtime posting code!

caps
caps1275×524 109 KB

16

@bruno do you want to email me and get it sorted
johnny@appknowledged.co.uk