如何修復鼠標懸停刪除按鈕，以便我們可以通過鍵盤刪除它？

Question

正如你在圖片中看到的標籤歡迎，鬧鈴等現在如果沒有選擇標籤，那麼只有我們可以刪除標籤，並且刪除按鈕只會在鼠標懸停時出現。現在我的問題是我想修復它，以便我可以通過使用鍵盤來刪除它？ （這裏選擇了歡迎標籤，所以我們可以刪除任何標籤）。這是一個無障礙問題。

CSS代碼：

.js .delete-tab { 
background: url(../images/common/remove.png) no-repeat 42%; 
cursor: pointer; 
display: block; 
height: 8px; 
position: absolute; 
right: 2px; 
text-indent: -9999em; 
top: 2px; 
width: 8px; } 

的javascript：

_deleteButton: function(obj) { 
     var instance = this; 

     obj.append('<span class="delete-tab">X</span>'); 

     var deleteTab = obj.find('.delete-tab'); 

     deleteTab.click(
      function(event) { 
       instance._removePage(this); 
      } 
     ); 

     deleteTab.hide(); 

     obj.hover(
      function() { 
       jQuery(this).find('.delete-tab').fadeIn('fast'); 
      }, 
      function() { 
       jQuery(this).find('.delete-tab').fadeOut('fast'); 
      } 
     ); 
    }, 

Answer 1

好，快速和骯髒的方法是KeyUp事件到文檔體結合，並聽取對於刪除鍵（或者您想要的任何鍵）。 也就是說。在「懸停」狀態obj.hover上進行綁定，並在「懸停」狀態下解除綁定。

編輯，添加例如：

//Add this method somewhere in you code 
function getDeleteBtn(e){ 
    if(e.which == 46) //46 == delete btn 
     alert('delete'); 
} 

obj.hover(
    function(){ 
     //Add this.... 
     $('body').bind('keyup', getDeleteBtn); 
    }, 
    function(){ 
     //And this to your hover statement 
     $('body').unbind('keyup', getDeleteBtn); 
    } 
); 

快速小提琴：http://jsfiddle.net/grgKm/