如何检测右键单击+删除使用jQuery/Javascript

Question

我想跟踪右键单击+删除HTML文本输入事件。我在映射单击鼠标右键+粘贴/剪切/复制成功，如下

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

      }); 

这里evalname'是我的html文本输入的ID。我尝试像

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

      }); 

但无法正常工作。有没有什么办法来映射右键单击+删除Jquery/Javascript中的事件？

Answer 1

正如已经回答的那样，不可能在浏览器中使用上下文菜单，实际上，使用.bind('copy', func....)不仅会收听contextmenu的副本，还会收到CTRL+c，因为它实际上会绑定到剪贴板。

我已经把一个插件，它说实话是一个黑客位的，但它可以让你捕捉：

上下文复制，剪切，粘贴，删除 - ONLY

上下文复制，剪切，粘贴，删除 - 和 - CTRL + C，CTRL + X，CTRL + v

或者只是一个，两个，三个或四个项目（小号）在上述任何一种方式。当然有一个问题是IE，它不会触发jQuerys .bind('input', func....来侦听更改，所以我需要触发IE，因此可能会有一个不同的小延迟（毫秒）。

插件：

(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); 

一个例子使用，文本菜单删除+上下文复制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

截至今日，我不认为浏览器已经实现它。

已添加用于复制，粘贴和剪切的事件作为与粘贴板交互的功能，并且由于删除不是粘贴板的一部分，所以尚未实施。

浏览器支持表（2011/04） http://codebits.glennjones.net/editing/setclipboarddata.htm

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

火狐文档 https://developer.mozilla.org/en/DOM/element#Event_Handlers

Answer 3

要在Stefan的评论，UberNeet的回答拓展：

您无法从上下文菜单中检测到“删除”选项。

你可以检测输入内容的变化，或者在keyup（它会捕获删除键）或更改或模糊（将检测它们是否清空字段并单击其他地方）。

如果你想知道它被清空的时刻，即使他们没有离开现场，那么你可以尝试设置一个计时器来每半秒轮询一次，并检查该字段是否为空。由于害怕过度使用穷人用户的浏览器，请小心使用太紧的定时器。

这些都不是理想的解决方案，但这是在浏览器中工作的乐趣！

Answer 4

尝试查看 'evalname' 的价值在特定的时间间隔之后。利用这一点，我们可以能够检测剪切/复制/粘贴/上下文菜单中删除

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