Paste Events

$.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

  1. User Avatar
    TeMc
    Permalink to comment#
    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);
                });
        });
    };
    
    
    • User Avatar
      Matt Benton
      Permalink to comment#

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

  2. User Avatar
    nicola
    Permalink to comment#

    What is the application of pasting event?

  3. User Avatar
    nripin babu
    Permalink to comment#

    That code is Sweet !!!!!

  4. User Avatar
    CopyAndPaste
    Permalink to comment#

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag