Stumped where to put e.preventDefault(); to prevent page jumping (clipboard.js)

I managed to get clipboard.js functionality working for a private page, but even though I’ve used dozens of preventDefaults before, I can’t find where to put it on this occasion…

When I click a link (Blog Title), the page jumps to top…

I’ve tried to e.preventDefault(); in countless spots.
The few times it worked, it disabled the copying functionality at the same time…

I guess I’m not seeing the bigger picture… :slight_smile:

Many thanks for a hint/handout :slight_smile:

example code:
www.defeestkoffer.be/temporary/preventDefault.php

Clipboard.js is registering an event on the body so you can’t catch it to preventDefault by the look of things.

Yo probably shouldn’t be using it on links with an href attribute.

Thanks!

I tried just using an

<em class="copy-BTN">Blog Title<em>

instead but it still does it… [oops, can’t give a class to an em, I guess; trying more stuff…]

I’m afraid I may have to use one of its other methods then that may not be doing that, but results in more bloat / CPU time.

Take another look at the Usage of Clipboard You need to specify what you want to copy e.g.

<em class="copy-BTN" data-clipboard-text="My blog title">Blog Title</em>

Sure you can :slight_smile:

1 Like

In my actual code I’m taking the text from the blog and the url that’s in the date, so I don’t think that lends itself well to the one you are mentioning. In theory I can of course put both inside that attribute (manually or with jQuery), but it feels silly doubling up 2 parts of data…

    var copyCode = new Clipboard('.copy-BTN', {
        text: function(trigger) {
        var txt = trigger.textContent, // txt of clicked link
            url = trigger.previousElementSibling.getAttribute('href'); // Get url out of previous <a>
        return txt + '\r' + url;       // make it 2 lines
        }
    });

When I test an alert(); in the …

copyCode.on('success', function(event) {
        alert('success');
        });

the page in one of my list setups does not jump afterwards; so I would hope there does exist something I should be able to put there that keeps it from jumping…?

Anyway, bedtime for me. Thanks again for your help! :blush:

Yes, you’re right. I think it’s a bug with the library itself and only surfaces for the case where you don’t have inputs that you’re copying from Firefox, you should file an issue.

When you don’t have an input / textarea to copy from it creates one and appends it to the DOM positioned off-left at the top of the screen, when this gets focus in Firefox that’s what seems to cause the jump to the top. Not sure if it’s preventable but it’s a great test case for them.

I found a hack around it that works, you can save the scroll position and then restore straight after the copy.

copyCode.on('success', function() {
  var x = window.scrollX;
  var y = window.scrollY;
  setTimeout(function() {
    window.scrollTo(x, y);
  }, 0);
})

Still, raise the issue with them and maybe include that solution ^, they may choose to roll it in.

1 Like

Here endeth my torture! :yum:

That hack looks familiar and it works well! Made my day. Thank You, Mark! :blush:

I already have everything working.

I’ll make another page that the author can use and hopefully put it here, I guess …

I’m not signed up there yet — that’s why I came here in the first place :wink:
May take me a day or two… :persevere:

Was getting ready to inform the author, but I noticed the issue is already resolved in a newer v1.5.10 :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.