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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".