Paste Events | CSS-Tricks

$.fn.pasteEvents = function( delay ) {
    if (delay == undefined) delay = 20;
    return $(this).each(function() {
        var $el = $(this);
        $el.on("paste", function() {
            $el.trigger("prepaste");
            setTimeout(function() { $el.trigger("postpaste"); }, delay);
        });
    });
};

Call this plugin on an element, then you get callback events for before and after pasting:

$("#some-element").on("postpaste", function() { 
    // do something
}).pasteEvents();

Comments

TeMc

# February 12, 2012

return $(this).each(function() {

The $( .. ) call is redundant here. As this function will be become a method of an jQuery object the context obviously already is a jQuery object, otherwise it wouldn’t have this method and returning it would not enable the chain-ability.


$.fn.foo = function() { return this; };
$.fn.bar = function() { return this; };
$.fn.qux = function() { return this; };

var $x = $('#x').foo().bar().qux();

Creating an jQuery object is only needed when dealing with a raw Element, such as in the callback of $.each

$("#some-element") .on("postpaste", function() {
    /* snip */
}).pasteEvents();

Since it’s called right after another the order doesn’t really matter, but as a best practice it’s best to enable the events before binding them, instead of first binding them and then enabling them. So, something like this:

$("#some-element")
  .watchPasteEvents()
  .on("postpaste", function() {
    /* snip */
  });

$el.on("paste", function() {
            $el.trigger("prepaste");
            setTimeout(function() { $el.trigger("postpaste"); }, delay);
        });

This will potentially cause events to be triggered multiple times on the same element. This happens if the user has multiple jQuery collections that overlap (e.g. $('.foo') and $('.bar') and some items have class="foo bar". This can be fixed by maintaining a boolean in the data object like this:

$.fn.watchpasteEvents = function (delay) {
    delay = delay || 20;

    return this.each(function () {
        var $el = $(this);
        if ($el.data('pasteEventsBound')) {
            return true;
        }
        $el
            .data('pasteEventsBound', true)
            .on('paste', function () {
                $el.trigger('prepaste');
                setTimeout(function () {
                    $el.trigger('postpaste');
                }, delay);
            });
    });
};

Matt Benton

Permalink to comment# February 14, 2012

Thanks TeMc, this is a good improvement to my code!

nicola

# August 18, 2013

What is the application of pasting event?

nripin babu

# August 21, 2014

That code is Sweet !!!!!

CopyAndPaste

# August 4, 2015

@TC,
nice but ‘pasteEventsBound’ is added (and set to ‘true’) while its never been removed. So this works only once until page is refreshed.

Comments

Leave a Reply Cancel reply