右鍵點擊jquery

Question

我想創建一個上下文菜單，當我右鍵單擊文本框。我做了它，當我點擊，我可以選擇使用鼠標，但我需要它使用鍵和鍵。

$(window).load(function(){ 
$(document).bind("contextmenu", function(event) { 
    event.preventDefault(); 
    $("<div class='custom-menu'>Custom menu</div>") 
     .appendTo("body") 
     .css({top: event.pageY + "px", left: event.pageX + "px"}); 
}).bind("click", function(event) { 
    $("div.custom-menu").hide(); 
}); 
}).bind("keyup",function(event) { 
    $("div.custom-menu").hide(); 
}); 
}).bind("keydown",function(event) { 
    $("div.custom-menu").hide(); 
}); 
    }); 

HTML

input type="text" name="firstbox" id="firstbox" onclick="append()" 

這裏右擊工程整頁bcoz我已經給身體上，如何使文本框的工作。如果你只想要一個文本框，然後將其綁定到該文本框您希望這樣

Answer 1

：

$("#yourtextboxid").bind(

，並重點向上和向下，我認爲你需要將它綁定到整個文件，然後使用一些標誌或自定義變量決定了你應該做什麼，當你上升或下降的時候你應該做的天氣！

你有沒有嘗試過這樣的事情（對於keyup和down）？

.bind("keypress",function(event){ 
    var key=event.keyCode || event.which; 
    if(key==38){ //UP 

    } 
    else{if(key==40){ //DOWN 

    }} 
} 

Answer 2

這比將所有內容綁定到文檔稍微複雜一點。我爲你提供了大量的評論a demo。

這是基本的想法：

• 輸入框查找上下文菜單和菜單鍵（導航，選擇和取消）事件。
• 內容菜單查找鼠標事件
• 該文件將查找鍵和鼠標事件關閉菜單

此代碼的唯一要求是，每個輸入需要一個唯一的標識符（ID在此案件）。

下面是腳本：

$(document).ready(function(){ 

    // cache menu object 
    var contextMenu = $(".custom-menu"), 
    // select menu item (handles selected class) 
    selectItem = function(el){ 
    el 
    .addClass('selected') 
    .siblings() 
    .removeClass('selected') 
    }, 
    // add menu item text to input - or whatever you wanted to do 
    addItem = function(item){ 
    // select item 
    selectItem(item); 
    var txt = item.text(); 
    // data-id attribute has the input ID where it is attached 
    $('#' + contextMenu.attr('data-id')).val(txt); 
    contextMenu.fadeOut('slow'); 
    }; 

    $(".inputbox") 
    .bind("contextmenu", function(event){ 
    event.preventDefault(); 
    var $this = $(this); 
    contextMenu 
    // save ID of input for addItem function 
    .attr('data-id', this.id) 
    // position the menu below the input box, not at the mouse position 
    .css({ 
     top: $this.position().top + $this.outerHeight() + "px", 
     left: $this.position().left + "px" 
    }) 
    .show(); 

    // resets the selected menu item to the first item 
    selectItem(contextMenu.find('li').eq(0)); 

    }) 
    .bind("keyup", function(event){ 

    // escape closes the menu 
    if (event.which === 27) { contextMenu.fadeOut('slow'); return; } 

    // ignore key inside input if menu is hidden or key is not up, down or enter 
    if (contextMenu.is(':hidden') || event.which !== 38 && event.which !== 40 && event.which !== 13) { return; } 

    // get menu items 
    var items = contextMenu.find('li'), 
    sel = contextMenu.find('.selected'), 
    item = items.index(sel); 

    // enter was pressed, add selected item to input 
    if (event.which === 13) { addItem(sel); return; } 
    // up arrow pressed 
    item += (event.which === 38 && item - 1 >= 0) ? -1 : 0; 
    // down arrow pressed 
    item += (event.which === 40 && item < items.length - 1) ? 1 : 0; 
    // select menu item 
    selectItem(items.eq(item)); 

    }); 

    // Context menu: hide and make the choices clickable 
    contextMenu 
    .hide() 
    .find('li') 
    .bind('click', function(){ 
    addItem($(this)); 
    }) 
    .hover(function(){ 
    $(this).addClass('hovered'); 
    },function(){ 
    $(this).removeClass('hovered'); 
    }); 

    $(document).bind("click keyup", function(event) { 
    // ignore if this happens inside an inputbox class 
    if (!$(event.target).is('.inputbox')) { 
     contextMenu.hide(); 
    } 
    }); 

}); 

Answer 3

$('#div1,#div2').on('contextmenu', function (e) { 
    e.stopPropagation(); 
    e. 
    $('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>'); 
    return false; 
}); 

在結尾處加上返回false。 它不會允許上下文菜單中顯示