Skip to Content (Press Enter)
2020-07-02 13-32-59
Max de Groot
278Views
3Comments
Use JavaScript on dynamic expression
Question
JavaScript
Traditional Web
Application Type
Traditional Web

Hi.

I have a requirement to make a copy button so my end users can easily copy parts of a generated text. I want to use JS for this. 

The text is created based upon given answers by the end user and consists of multiple alineas and chapters. The entire text is an output from the preparation of a webblock and has HTML. With CSS it is later styled and seperated by chapter/alinea. I want to make a copy button available per chapter so the end user can copy 1 part and past in it another system (which is also divided into chapters, so copying everything at once is not userfriendly). 

I have written a JS and HTML/CSS created a copy button, but nothing happens when I click it. Does anybody have any experience with this? 

Max

0
0
09 Jun 2022
Copy Link
2024-05-17 04-26-02
Maxime Baracco

Hi Max,


Something must be wrong in the JS code or on the parameters/object ids you use. Could you include some screenshots or maybe include the oap of your project for us to investigate further?


Thank you

0
0
09 Jun 2022
Copy Link
2020-07-02 13-32-59
Max de Groot

This is the JS I am using at the moment. 

var copyToClipboard = function(btn) {
    var textbox = btn.parentElement.querySelector('.textarea');
    var doc = document;
    
    if(!textbox) {
        return null;
    }
    var range;
    var selection;

    if( doc.body.createTextRange ) {
        range = doc.body.createTextRange();
        range.moveToElement( textbox );
        range.select();
    } else if ( window.getSelection ) {
        selection = window.getSelection();

        range = doc.createRange();
        range.selectNodeContents( textbox );

        selection.removeAllRanges();
        selection.addRange( range );
    }
    document.execCommand( 'copy' );
    window.getSelection().removeAllRanges();
}
window.copyToClipboard = copyToClipboard;

var initCopyToClipboard = function() {
    var copyButtons = document.getElementsByClassName('textarea-copy');
    
    for (var i = 0; i < copyButtons.length; i++) {
        copyButtons[i].innerHTML = 'copy';
        
        if (document.addEventListener){
            document.addEventListener("click", function(event){
                var targetElement = event.target || event.srcElement;
                copyToClipboard(targetElement);
            });
        } else if (document.attachEvent) {    
            document.attachEvent("onclick", function(){
                var targetElement = event.target || event.srcElement;
                copyToClipboard(targetElement);
            });
        }
    }
}

if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCopyToClipboard);
} else {
    initCopyToClipboard();
}
0
0
09 Jun 2022
Copy Link
2024-05-17 04-26-02
Maxime Baracco

Hi Max,


That's not how you should do it. It might be possible to adapt this code and make it work with an OutSystems reactive app, but I can see you're trying to attach listeners to the button, and accessing elements using classnames, but there are better ways to do that.


For instance, you could pass the text-webblock id to your JS script, then use these 3 lines:

var element = document.getElementById(($parameters.TextBlockId);

element.select();

document.execCommand('copy');


Using navigator.clipboard would be another way to write some txt in the clipboard:

navigator.clipboard.writeText($parameters.TextToWrite);


What do you think of these 2 examples?

0
0
09 Jun 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.