CODEWITHSUNDEEP
javascriptjqueryhtml
Ryan - Llaver
Ryan - Llaver

Reputation: 526

Intercepting Paste action on a div only works after right clicking

I am working on a project in which I need to intercept a paste action that is being performed on a div (must be a div, can't be a text box). Right now I am binding the event after the div has focus (you've clicked on the div):

$('#result').unbind().click(function () {
    $(this).focus();
    $('#result').unbind().on('paste', function () {
        console.log('paste behaviour detected!');
    });
}); //NOTE: I have also tried. result.bind, result.unbind.bind, onpast="function()" 
    //(in the HTML), and a couple of other things.

I have also tried changing around the flow of the class (no change).

One more thing. I am using chrome/opera to develop. When I test this on firefox it works just fine. Is there anything I can try to fix this or did I stumble upon a bug?

NOTE: I am leaving out info about the project for simplicity, but if you need more context I can provide it.

Edit: I am pasting in to a div so there is no rightclick>paste button. This is solely with ctrl+v.

Upvotes: 0

Views: 34

Answers (1)

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

You can detect the combination of ctrl/cmd + v keys as well:

$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
          ctrlDown = true;
        }
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
          ctrlDown = false;
        }
    });

    $(document).keydown(function(e) {
        if (ctrlDown && e.keyCode == vKey) { 
                alert('PASTE DETECTED');
            }
        });
    });
});

https://jsfiddle.net/ufskbo0a/1/

You can use the clipboardData api in most browsers to get the data: window.clipboardData.getData('Text')

http://caniuse.com/#search=clipboardData

Upvotes: 1

Related Questions