right click jquery

I am trying to create a context menu,when i right click on text box.I did it when i click,i am able to select using mouse but i need it using key up and key down too.

 $(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()"

here that right clic开发者_运维知识库k works on whole page bcoz i have given body ,how to make that work on text box.

if you want only for one textbox then bind it only to that textbox you wish like this:

$("#yourtextboxid").bind(

and for key up and down i think you will need to bind it to whole document and then using some flags or custom variables determine weather you should do whatever is to do when you go up or down!

did you try something like this (for keyup and down)?

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

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

   }}
}

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

add return false at the end. it will not allow the context menu to display

It's a little more complicated than just binding everything to the document. I put together a demo for you with lots of comments.

This is the basic idea:

• The input box looks for the context menu and menu keys (navigation, selection and canceling) events.
• The content menu looks for mouse events
• The document looks for the key and mouse events to close the menu

The only requirement for this code is that each input needs a unique identifier (ID in this case).

Here is the script:

$(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();
    }
  });

});