TOPIC:

Copy text element value to clipboard button 2 weeks 3 days ago #242901

  • Topic Author
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
I have presented some data in a read-0nly text element and would like to provide a copy-to-clipboard button to make it easy for my customer. Is there an easy way to provide a per-element copy button?

thanks,
Richard

Please Log in or Create an account to join the conversation.

Copy text element value to clipboard button 2 weeks 3 days ago #242909

  • TheMuffinMan's Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Posts: 9069
  • Karma: 167
  • Thanks: 737
Hi,

sure, in principle, you create a button for each input and add a custom action in the button's advanced tab => action script => click "custom" => check "click", such that it looks like this
function ff_BUTTONNAME_action(element, action)
{
    switch (action) {
        case 'click':

              let copyText = ff_getElementByName('TEXTFIELDNAME');

              /* Select the text field */
              copyText.select();
              copyText.setSelectionRange(0, 99999); /*For mobile devices*/

              /* Copy the text inside the text field */
              document.execCommand("copy");

               // indicating the copy event to the user
              let old_val = JQuery(element).prop('value');
              JQuery(element).prop('value', 'copied!');
              JQuery(element).html('copied!');
              setTimeout(function(){ 
                    JQuery(element).prop('value', old_val); 
                    JQuery(element).html(old_val);
              }, 1000);

            break;
        default:;
    } // switch
}

BUTTONNAME needs to be replaced with the name (not title) of the button.
TEXTFIELDNAME needs to be replaced with the name (not title) of the field to be copied from.

I attached you a form as example.

Please download, unzip and install the form in BF => Configuration => Package Installer.

File Attachment:

File Name: clipboard.zip
File Size:8 KB


Please let me know how it went!

Regards,
Markus
Attachments:
The following user(s) said Thank You: rambopierce

Please Log in or Create an account to join the conversation.

Copy text element value to clipboard button 2 weeks 3 days ago #242940

  • Topic Author
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
That did work. It isn't as pretty as I had hoped, but that's not your fault. After clicking the button, it briefly says 'copied' and then the button goes away. Guess there is no need for it to stay there, but it is interesting that it goes away. Perhaps what I was really after was not a button at all. On some pro sites, I have seen a little copy widget in the top right-hand corner of the text box or just to the immediate right of the text box. That's more of what I was looking for rather than a completely separate submit button. Is that something we can do?

thanks,
Richard

Please Log in or Create an account to join the conversation.

Copy text element value to clipboard button 2 weeks 3 days ago #242948

  • TheMuffinMan's Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Posts: 9069
  • Karma: 167
  • Thanks: 737
anything is possible.
do you have an example of such a site?

Please Log in or Create an account to join the conversation.

Copy text element value to clipboard button 2 weeks 1 day ago #243096

  • Topic Author
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
I do, but they are both sites you have to have a login to. One that you could easily get a login to and view is bitbucket.org. When you go to any file in any repository and select checkout in the top right-hand corner, it puts up a box that has a text element followed immediately by a copy icon.

See blog.prototypr.io/3-ways-to-copy-to-clipboard-5077f5774b55

A better one, but not easy to share, is after logging in to portal.azure.com . M$ has managed to have a hidden icon next to and inside the text element so that when you float your cursor over that area the copy icon appears and when you select it, the text inside that field is copied to the copy/paste buffer.

I'm ok with what I have thanks to you, but if I could customize the button and place it up near the end of the text element it would be better.

thanks,
Richard

Please Log in or Create an account to join the conversation.

Copy text element value to clipboard button 2 weeks 1 day ago #243102

  • TheMuffinMan's Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Posts: 9069
  • Karma: 167
  • Thanks: 737
Hi,

this was just an example, I thought you meant something different.
The link you provided a copy function that triggers when you click on the textfield.
I could do that, too if you like. It is just a minor change.

Regards,
Markus

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.054 seconds

July Sale!

Discounts for all of our extensions + support. Ending July 31st!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!