How To Detect Right Mouse Click + Delete Using Jquery/Javascript
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,});
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
Firefox Docshttps://developer.mozilla.org/en/DOM/element#Event_Handlers