如何檢測右鍵單擊+刪除使用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);