layerssss / paste.js

read image/text data from clipboard (cross-browser)
http://layerssss.github.io/paste.js/
MIT License
463 stars 94 forks source link

Text selection broken #60

Closed MichaelRoehrig closed 6 years ago

MichaelRoehrig commented 6 years ago

Hello,

I'm running a file upload service (just for fun) and I've been using paste.js to allow users to CTRL+V images or text to the website. It'll then show "Pasted Image" and give an image preview or "Pasted Text". These can then be uploaded. Works perfectly - BUT:

To be able to paste the data no matter where the focus is on the website, I did

$('body').pastableNonInputable();
$('*').on('pasteImage', function(ev, data) {
    // not relevant
});

The problem is, that my website now has a broken text selection model. It took me quite long to figure this out, but it has something to do with pastableNonInputable() on the body. If I start selecting the text in a div for example, it works as expected only if I start selecting from the left or right side of the div (start selecting outside the div and then enter it). If I select text randomly inside the div it always deselects after releasing the mouse.

I want paste.js to do practically nothing except providing the paste data in a variable, no matter where the paste was initiated.

Am I doing something wrong or is this use case not supported?

Thanks in advance!

Edit1: See this small fiddle: https://jsfiddle.net/n43f4mor/4/ Edit2: Seems only to behave this way in Firefox, in IE11 and Edge I couldn't select at all, always drops. Edit3: Dug a bit into the code, it's probably line 150 that causes this behaviour:

return paste._container.focus();

This line gets fired everywhere after clicking/selecting in the element the pastableNonInputable() was attached to. It also happens on the first example at http://layerssss.github.io/paste.js/. The focus requesting also causes mobile browsers to show the keyboard, because the invisible input element created requests focus.

Demonslay335 commented 6 years ago

I can confirm the same behavior. If I comment out the snippet you mention on line 150, the text selection no longer is broken, but the paste action itself no longer works either...

I have a work-around involving detection of whether text is selected per this StackOverflow answer relating to a click handler: https://stackoverflow.com/a/31982533/1301139

paste.js:147

      $(nonInputable).on('click', (function(_this) {
        return function(ev) {
          if (!isFocusable(ev.target, false) && !window.getSelection().toString()) {
            return paste._container.focus();
          }
        };
      })(this));

I have some more testing to do, but if it seems to be stable without compromising any other functionality of the plugin, I'll see about submitting a PR.