右键单击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()"

这里右击在整个页面上起作用，因为我已经给出了正文，如何在文本框上起作用。

Answer 1

如果您只想要一个文本框，则只将其绑定到您希望文本框，如下所示：

$("#yourtextboxid").bind(

对于向上键和向下键，我认为你需要将它绑定到整个文档，然后使用一些标志或自定义变量来确定当你向上或向下时是否应该做任何事情！

你有没有尝试过这样的东西(快捷键和快捷键)？

.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，里面有很多评论。

这是基本思想：

• 输入框查找上下文菜单和菜单键(导航、选择和取消)事件。
• 内容菜单查找鼠标事件
• 文档查找键和鼠标事件以关闭menu

此代码的唯一要求是每个输入都需要一个惟一的标识符(本例中为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();
    }
  });

});