Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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. 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);
                });
        });
    };
    
    
  2. nicola
    Permalink to comment#

    What is the application of pasting event?

  3. nripin babu
    Permalink to comment#

    That code is Sweet !!!!!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```