Willkommen, Gast
Angemeldet bleiben:

THEMA:

Copy text element value to clipboard button 3 Monate 1 Woche her #242901

  • Autor
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Beiträge: 39
  • Dank erhalten: 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Copy text element value to clipboard button 3 Monate 1 Woche her #242909

  • TheMuffinMans Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Beiträge: 10063
  • Karma: 167
  • Dank erhalten: 800
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.

Dateianhang:

Dateiname: clipboard.zip
Dateigröße:8 KB


Please let me know how it went!

Regards,
Markus
Anhänge:
Folgende Benutzer bedankten sich: rambopierce

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Copy text element value to clipboard button 3 Monate 1 Woche her #242940

  • Autor
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Beiträge: 39
  • Dank erhalten: 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Copy text element value to clipboard button 3 Monate 1 Woche her #242948

  • TheMuffinMans Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Beiträge: 10063
  • Karma: 167
  • Dank erhalten: 800
anything is possible.
do you have an example of such a site?

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Copy text element value to clipboard button 3 Monate 1 Woche her #243096

  • Autor
  • rambopierce
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Beiträge: 39
  • Dank erhalten: 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Copy text element value to clipboard button 3 Monate 1 Woche her #243102

  • TheMuffinMans Avatar
  • TheMuffinMan
  • Offline
  • Developer
  • Developer
  • Beiträge: 10063
  • Karma: 167
  • Dank erhalten: 800
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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Seite:
  • 1
  • 2
Moderatoren: ForumSupport
Ladezeit der Seite: 0.058 Sekunden

Angebot

Sommer Special! Alle Mitgliedschaften zum Sonderpreis!

Prio Support, alle Extensions und alle Templates in einem Paket.

Hier geht's zur Bestellung

Crosstec hilft sparen!

Falls Sie neu bei Crosstec sind aber bereits einen Formulargenerator bei einem anderen Hersteller gekauft haben, dann bekommen sie von uns einen Rabatt von 25% auf unsere 1-Jahres und Pro-Mitgliedschaften

Wie Sie an den Rabatt kommen?

Schreiben Sie uns einfach eine kurze Email mit beigelegten Kaufbeleg (z.B. PayPal Quittung) an sales@crosstec.org.

Wir unterstützen die Joomla Community

Crosstec unterstützt weltweit alle offiziellen Joomla! User Groups und Organisatoren von Joomla! Days die bei Joomla.org registriert sind.

Falls das auf dich zutrifft und du eines unserer Produkte brauchst, schreib uns eine kurze Email an info@crosstec.org und du bekommst eine Flatrate-Mitgliedschaft geschenkt!