右键点击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。 它不会允许上下文菜单中显示