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();

Reference URL

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.

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag