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

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

最后添加return false。它不允许显示上下文菜单

Answer 3

这比将所有内容绑定到文档要复杂一些。我为你准备了很多评论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();
    }
  });

});

右键单击jquery

3 个答案: