правой кнопкой мыши 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(

и ключ вверх и вниз, я думаю, что вам нужно будет привязать его ко всему документу, а затем с помощью некоторые флаги или пользовательские переменные определяют погоду, которую вы должны делать, когда будете идти вверх или вниз!

Вы попробовали что-то вроде этого (для клавишных и пустых)?

.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; 
}); 

добавить вернуть ложь в конце. это не позволит контекстное меню для отображения