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 ?

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 ?

• javascript
• jquery

• 1 Not sure I understans your question, what do you mean with "Delete"? The button the context menu option on selected text? Wouldn´t it be enough to use the change event and compare the value against null/empty string? – Stefan Commented Jan 4, 2012 at 16:03

4 Answers 4

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:

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

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!

As of today, I don't believe browsers have implemented it.

The events for copy, paste and cut have been added as functionality to interact with the Pasteboard, and since delete is not part of the pasteboard it hasn't been implemented.

Browser Support Table (2011/04) http://codebits.glennjones.net/editing/setclipboarddata.htm

WebKit Docs http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/CopyAndPaste.html

Firefox Docs https://developer.mozilla.org/en/DOM/element#Event_Handlers

Try to check the value of 'evalname' field after particular time interval. Using this we can able to detect cut/copy/paste/delete of context menu

 var evalnameLength=$("#evalname").val().length;
    var enableSave;
        enableSave=setInterval(function(){
            if(evalnameLength!=$("#evalname").val().length){
                do something;
                clearInterval(enableSave);
            }
        },500);