How To Detect Right Mouse Click + Delete Using Jquery/Javascript

Question

I want to track Right Mouse Click + Delete event on a html text input. I Succeed in mapping Right Mouse Click + Paste/Cut/Copy as below

          $("#evalname").bind('paste/cut/copy', function(e)
          {
             do something

          });

Here 'evalname' is the id of my html text input. I tried like

          $("#evalname").bind('delete', function(e)
          {
             do something

          });

but not working. Is there any way to map Right Mouse Click + Delete event in Jquery/Javascript ?

Answer 1

As already answered, it isn't possible to pick up on the browsers contextmenu delete being used, in fact, using .bind('copy', func....) will not only listen to the contextmenu's copy, but also CTRL+c as it's actually binding to the clipboard.

I have put together a plugin, which to be honest is a bit of a hack, but it will allow you to catch:

Context COPY, CUT, PASTE, DELETE - ONLY

Context COPY, CUT, PASTE, DELETE - AND - CTRL+c, CTRL+x, CTRL+v

Or just one, two, three or four item(s) in either of the above ways. Of course one problem was IE, it doesn't trigger jQuerys .bind('input', func.... to listen for changes, so I needed to trigger it for IE, hence there could be a vary small delay (milliseconds).

The plugin:

(function($) {
    $.fn.contextDelete = function(options) {
        var set = {
            'obj': $(this),
            'menu': false,
            'paste': false,
            'cut': false,
            'copy': false,
            'set': '',
            'ie': null,
        };
        var opts = $.extend({
            'contextDelete': function() {},
            'paste': function() {},
            'cut': function() {},
            'copy': function() {},
            'contextOnly': false,
        }, options);

        $(window).bind({
            click: function() {
                set.menu = false;
            },
            keyup: function() {
                set.menu = false;
            }
        });

        set.obj.bind({
            contextmenu: function() {
                set.menu = true;
                set.paste = false;
                set.cut = false;
                set.copy = false;
                set.val = set.obj.val();

                // Hack for IE:
                if ($.browser.msie) {
                    set.ie = setInterval(function() {
                        set.obj.trigger($.Event('input'));
                        if (!set.menu) {
                            clearInterval(set.ie);
                        }
                    }, 300);
                }
                // End IE Hack
            },
            paste: function(e) {
                set.paste = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.paste(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.paste(e);
                }
            },
            cut: function(e) {
                set.cut = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.cut(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.cut(e);
                }
            },
            copy: function(e) {
                set.copy = true;
                if (opts.contextOnly) {
                    if (set.menu) {
                        opts.copy(e);
                        set.menu = false;
                    }
                }
                else {
                    opts.copy(e);
                }
            },
            input: function(e) {
                if (set.menu && (!set.paste) && (!set.cut) && (!set.copy)) {
                    if (set.obj.val().length < set.val.length) {
                        opts.contextDelete(e);
                        set.menu = false;
                    }
                }
            }
        });
    };
})(jQuery);

One example usage, contextmenu delete + context copy ONLY:

$('#evalname').contextDelete({
    contextDelete: function(e) {
        alert('You just deleted something!');
    },
    copy: function(e) {
        alert('You just copied something!');
    },
    contextOnly: true,
});

Click Here for a DEMO

Answer 2

To expand on Stefan's comment, and UberNeet's answer:

You can't detect a choice of "Delete" from the context menu.

You can detect a change to the input's contents, either at keyup (that'll catch the delete key) or on change or blur (that'll detect if they empty the field and click somewhere else).

If you want to know the moment it's emptied, even if they've not left the field, then you could try setting a timer to poll every half second, and check if the field is empty. Beware of using too tight a timer for fear of overworking the poor user's browser.

None of these are ideal solutions, but that's the joy of working inside the browser!