1

I'm using a js to create a "copy to clipboard" button, using the following code from here:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

I then load the script using the following:

add_action( 'wp_enqueue_scripts', 'load_copy' );
function load_copy() {
    wp_enqueue_script('copyjs', get_template_directory_uri() . '/js/copy.js', array('jquery') );
}

I then have a button setup to trigger this js onclick, to copy text from within a div element. The function works beautifully, except: because the js is loaded in the footer in WP, the focus() command causes the page to scroll to the bottom when the onclick event is triggered.

I've tried using focus({preventScroll: true}) but then the function doesn't work, and I'm not savvy enough with js to figure out why.

Does anyone have a solution to stop the page from scrolling?

EDIT: adding the solution I'm now using, drawn from Veerji's answer below, with one change.

function copyToClipboard(selector){
        var $temp = jQuery("<div>");
        jQuery("body").append($temp);
        $temp.attr("contenteditable", true)
            .html(jQuery(selector).html()).css('position', 'fixed').select()
            .on("focus", function() { document.execCommand('selectAll',false,null); })
            .focus().css('position', 'static');
        document.execCommand("copy");
        $temp.remove();
}

1 Answer 1

1

In jQuery focus by default scroll the page to the element. If we use focus({preventScroll: true}) our copy function will not work as you mension. So I have use some css hack. See the following jQuery code.

function copyToClipboard(selector, event){
    event.preventDefault();
    var $temp = jQuery("<div>");
    jQuery("body").append($temp);
    $temp.attr("contenteditable", true)
      .html(jQuery(selector).html()).css('position', 'fixed').select()
      .on("focus", function() { document.execCommand('selectAll',false,null); })
      .focus().css('position', 'static');
    document.execCommand("copy");
    $temp.remove();
}

This is working fine for me.

If you don't want to use this hack you can also use some pure javascript code. For example this

2
  • When I try this, the browser throws up the error: Uncaught TypeError: Cannot read property 'preventDefault' of undefined or Uncaught TypeError: event is undefined. Edit: but if I remove that event it works perfectly!
    – Jon Fergus
    Dec 15, 2020 at 18:29
  • To remove the js error add second arument as event in you function call like onclick="copyToClipboard('#copy-jwf', event)" on copy button. If without event it working no need to add event.
    – Veerji
    Dec 16, 2020 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.